I am looking for a css way to hav this layout 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%},它只适用于窗口而不是doc。我还试图放置一个900px的身体背景图像,它不是以容器div为中心。
5 个解决方案
#1
9
Looking at the live site because the URL is conveniently visible inside your image..
查看实际网站,因为网址在图片中方便可见。
Add this CSS:
添加此CSS:
html, body {
height: 100%
}
#container {
min-height: 100%
}
#2
0
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上使用合适的样式,您可以根据需要调整背景。
#3
0
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的特殊分隔符div来强制包含div继续在你的其他div之后: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是否说好或坏做法,可能不好,但它有效。
#4
0
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/
#5
0
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:
问题有点旧,但是,如果你不想改变body和html,并且需要一个没有滚动条的100%高度的元素,你可以在div上使用它:
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.
希望这可以帮助别人。
#1
9
Looking at the live site because the URL is conveniently visible inside your image..
查看实际网站,因为网址在图片中方便可见。
Add this CSS:
添加此CSS:
html, body {
height: 100%
}
#container {
min-height: 100%
}
#2
0
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上使用合适的样式,您可以根据需要调整背景。
#3
0
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的特殊分隔符div来强制包含div继续在你的其他div之后: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是否说好或坏做法,可能不好,但它有效。
#4
0
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/
#5
0
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:
问题有点旧,但是,如果你不想改变body和html,并且需要一个没有滚动条的100%高度的元素,你可以在div上使用它:
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.
希望这可以帮助别人。