Html div 拉伸 100% 页面高度，无论内容如何
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12043830/
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
div stretch 100% page height regardless of content
提问by AMC
Basically, I have all of my site's content centered within a div that is a specified width and an intended height of 100% regardless of the actual length of the content. I've specified height:100%;for html, body, and #mainhowever the div still comes up short as seen on this page- I don't want their to be any gap between the #main's grey box and the bottom of the screen. Is this possible? How?
基本上，无论内容的实际长度如何，我都将我网站的所有内容都集中在一个指定宽度和 100% 预期高度的 div 中。我已经指定height:100%;了html, body，#main但是 div 仍然很短，如本页所示- 我不希望它们在#main的灰色框和屏幕底部之间有任何间隙。这可能吗？如何？
采纳答案by sheriffderek
see this jsfiddle
看到这个jsfiddle
html, body {height: 100%;}
.container {min-height: 100%;}
discussing this over here too.....
也在这里讨论这个.....
proper css to ensure that the body element fills the entire screen
回答by Kjartan
You can set position:absolute, and that should stretch it to the bottom. Seems as if that will work fine in Opera and Chrome at least.
您可以设置position:absolute，这应该将其拉伸到底部。似乎至少在 Opera 和 Chrome 中可以正常工作。
That will, however, be in conflict with the video player below, and also push your copyright notice down below the page. Maybe you can move the notice up into the gray box though?
但是，这会与下面的视频播放器发生冲突，并且还会将您的版权声明推送到页面下方。也许您可以将通知移到灰色框中？
回答by Ambuj Khanna
You can achieve by 2 ways:
您可以通过两种方式实现：
1) Give Height to 100% if you don't know how long page could be.
1) 如果您不知道页面可以有多长，请将高度设置为 100%。
html, body {
height: 100%;
}
.yourContainerClass {
min-height: 100%;
}
2) If you know how much you need to stretch vertically then you can use height in "vh(vertical height)".
2）如果您知道需要垂直拉伸多少，那么您可以在“vh（垂直高度）”中使用高度。
.yourContainerClass{
height:80vh;
}
I hope it will help you. Thank you!
我希望它会帮助你。谢谢！
