开发者

Div height 100% with scroll bar

开发者 https://www.devze.com 2023-03-16 05:23 出处:网络
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 witho

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.

Div height 100% with scroll bar


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号