将 div 扩展到页面底部（仅 HTML 和 CSS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22934016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extend div to bottom of page (only HTML and CSS)
提问by woojoo666
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>
I need element bottomto extend from the bottom of topto 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 bottomdiv
我需要元素bottom从top页面底部延伸到底部。欢迎任何仅使用 html 和 css 的解决方案，您可以添加容器 div 或任何内容，只要我可以动态调整bottomdiv 的大小
EDIT:
I don't want to hard-code any values for bottom, because I want bottomto adjust if topis resized
编辑：我不想硬编码任何值bottom，因为我想bottom调整是否top调整大小
here's a fiddle for all your fiddling needs: http://jsfiddle.net/8QnLA/
这是满足您所有摆弄需求的小提琴：http: //jsfiddle.net/8QnLA/
回答by Danield
Solution: #1: css tables:
解决方案：#1：css 表：
html, body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
#top, #bottom {
width: 100%;
background: yellow;
display: table-row;
}
#top {
height: 50px;
}
#bottom {
background: lightgrey;
height: 100%;
}
html, body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
#top, #bottom {
width: 100%;
background: yellow;
display: table-row;
}
#top {
height: 50px;
}
#bottom {
background: lightgrey;
height: 100%;
}<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>Solution #2: Using calc and viewport units
解决方案#2：使用 calc 和 viewport 单位
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
min-height: calc(100vh - 50px);
}
body {
margin: 0;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
min-height: calc(100vh - 50px);
}
Where `min-height: calc(100vh - 50px);` means:
'Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.'<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>Solution #3 - Flexbox
解决方案 #3 - Flexbox
body {
margin: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
flex: 1;
}
body {
margin: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
flex: 1;
}<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>回答by Explosion Pills
Set the height of html, bodyto 100%. Then, you can set the last <div>'s height to 100%and it will be as tall as the window. Since you probably don't want scrolling, you can set overflow: hiddenon the html, bodyas well.
将高度设置html, body为100%。然后，您可以将 last<div>的高度设置为100%，它将与窗口一样高。由于您可能不想滚动，因此您也可以overflow: hidden在 上进行设置html, body。
