它是一个非常简单的问题，但我似乎无法在线找到合适的解决方案。我想在自然流中有一个元素列表，最后一个元素扩展到页面的底部。所以如果我有
<div id="top" style="height:50px;"></div> <div id="bottom" style="background:lightgrey;"></div>
我需要元素底部从页面的底部延伸到底部。任何只使用html和css的解决方案是受欢迎的，您可以添加容器div或任何东西，只要我可以获得动态调整大小的底部div
编辑：
我不想硬编码任何值为底部，因为我希望底部调整，如果顶部调整大小
这是一个小提琴，满足你所有的需求：http://jsfiddle.net/8QnLA/
解决方法
解决方案：#1：css表：
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和viewport单位
#top
{
height: 50px;
background: yellow;
}
#bottom
{
background: lightgrey;
height: calc(100vh - 50px);
}
html,body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#top
{
height: 50px;
background: yellow;
}
#bottom
{
background: lightgrey;
flex:1;
}
