问题描述
这是一个非常简单的问题,但我似乎找不到合适的解决方案在线。我想有一个自然流中的元素列表,最后一个元素扩展到页面的底部。所以如果我有
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的需求:
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;
}
这篇关于将div扩展到页面底部(仅HTML和CSS)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!