Div height 100% with scroll bar
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.
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.
Looking at the live site because the URL is conveniently visible inside your image..
Add this CSS:
html, body {
height: 100%
}
#container {
min-height: 100%
}
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.
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:
<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.
A sticky footer should accomplish this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
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:
#fullHeightDiv{
position: absolute;
height: 100%;
bottom: 0;
}
Hope this can help someone.
加载中,请稍侯......
精彩评论