Html 带滚动条的 Div 高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6499624/
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 height 100% with scroll bar
提问by ThomasReggi
I am looking for a css way to hav thislayout sport a 100% height div, meaning that the white will trail down to the bottom of the document not the window. I would like to do this without images and without javascript.
我正在寻找一种 css 方式让这个布局具有 100% 高度的 div，这意味着白色将拖到文档的底部而不是窗口。我想在没有图像和 javascript 的情况下做到这一点。
I've tried html,body{height:100%}which only applied to the window not the doc.
I've also tried to put a 900px body background image and it was not centered with the container div.
我试过html,body{height:100%}它只适用于窗口而不是文档。我还尝试放置一个 900 像素的身体背景图像，但它没有与容器 div 居中。
回答by thirtydot
Looking at the live site because the URL is conveniently visible inside your image..
查看实时站点，因为 URL 在您的图像中很方便地可见。
Add this CSS:
添加这个CSS：
html, body {
height: 100%
}
#container {
min-height: 100%
}
回答by Marc B
You'd need something like
你需要类似的东西
<html>
<body style="height: 100%; overflow: hidden">
<div id="realbody" style="height: 100%: overflow: auto">
... page goes here ...
</div>
</body>
</html>
This way you disable scroll bars on the actual page body, and all the scrolling tags place "inside" the document on the "realbody" div. With suitable styling on #realbody, you can make the backgrounds stretch as you need them.
通过这种方式，您可以禁用实际页面正文上的滚动条，并且所有滚动标签都将文档“内部”放置在“realbody”div 上。在#realbody 上使用合适的样式，您可以根据需要拉伸背景。
回答by Kristian
You can actually force the containing div to continue behind your other divs by using special separator divs with a clear: both; set in them. Like this:
您实际上可以通过使用带有 clear: both; 设置在他们。像这样：
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer
</div>
<div style="clear:both;"></div>
</div>
Use the where ever you want your wrapper to continue going down.
使用您希望包装器继续向下的位置。
NOTE: I'm not sure whether W3c says that's good or bad practice, probably bad, BUT it works.
注意：我不确定 W3c 是否说这是好的或坏的做法，可能是坏的，但它有效。
回答by Adam Grant
A sticky footer should accomplish this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
粘性页脚应该完成此操作：http: //ryanfait.com/resources/footer-stick-to-bottom-of-page/
回答by GaelDev
the question is a bit old,
but, if you don't want to change body and html,
and need an element with 100% height without scrollbar you can use this on the div:
这个问题有点老了，
但是，如果您不想更改正文和 html，
并且需要一个没有滚动条的 100% 高度的元素，您可以在 div 上使用它：
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.
希望这可以帮助某人。
