将div扩展到页面底部（仅HTML和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：
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和视口单位
Solution #2: Using calc and viewport units
FIDDLE
#top
{
height: 50px;
background: yellow;
}
#bottom
{
background: lightgrey;
height: calc(100vh - 50px);
}
解决方案＃3 - Flexbox
Solution #3 - Flexbox
FIDDLE
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#top
{
height: 50px;
background: yellow;
}
#bottom
{
background: lightgrey;
flex:1;
}