将div扩展到页面底部（仅HTML和CSS） [英] Extend div to bottom of page (only HTML and CSS)

问题描述

这是一个非常简单的问题，但我似乎找不到合适的解决方案在线。我想有一个自然流中的元素列表，最后一个元素扩展到页面的底部。所以如果我有

Its a very simple problem but I can't seem to find a suitable solution online. I want to have a list of elements in natural flow with the last element extended to the bottom of the page. So if I have

<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>

我需要元素 bottom 底部顶部到页面底部。任何只使用html和css的解决方案是受欢迎的，你可以添加容器div或任何东西，只要我可以动态调整底部 div

I need element bottom to extend from the bottom of top to the bottom of the page. Any solution that uses only html and css is welcome, and you can add container divs or anything, as long as I can get dynamic resizing of the bottom div

编辑：
我不想硬编码底部的任何值，因为我想要 bottom 可调整顶部是否调整大小

I don't want to hard-code any values for bottom, because I want bottom to adjust if top is resized

fiddling的需求： http://jsfiddle.net/8QnLA/

here's a fiddle for all your fiddling needs: http://jsfiddle.net/8QnLA/

推荐答案

解决方案：＃1：css tables：

FIDDLE

Solution: #1: css tables:

FIDDLE

html,body
{
    height:100%;
    width:100%;
}
body
{
    display:table;
}
#top, #bottom
{
    width: 100%;
    background: yellow;
    display:table-row;

}
#top
{
    height: 50px;
}
#bottom
{
    background: lightgrey;
    height:100%;  
}

解决方案＃2：使用calc和视口单位

FIDDLE

Solution #2: Using calc and viewport units

FIDDLE

#top
{
    height: 50px;
    background: yellow;
}
#bottom
{
    background: lightgrey;
    height: calc(100vh - 50px);
}

解决方案＃3 - Flexbox

FIDDLE

Solution #3 - Flexbox

FIDDLE

html, body
{
    height: 100%;
}
body
{
    display: flex;
    flex-direction: column;
}
#top
{
    height: 50px;
    background: yellow;
}
#bottom
{
    background: lightgrey;
    flex:1;
}

这篇关于将div扩展到页面底部（仅HTML和CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！