ansaurus

Question

HTML divs: Auto height and overflow: auto?

Answer 1

A:

In order to get CSS percentage height to work, the element's parent must have a height defined. As a result we can do it with the following markup:

<body>    
    <div id="content">
        <div id="header">Header</div>
        <div id="text">
           Text content of your page
        </div> 
    </div>
    <div id="footer">Footer</div>    
</body>

All of the site's content except for the footer is contained in the #content element. This then uses a min-height: 100% declaration to be always at least 100% of its parent's height. Since its parent is the body and has a height declaration, this works as expected.

Finally the footer is brought into view with a negative margin and padding-bottom is added to the #text element so its content doesn't get accidentally overlapped.

The CSS is as follows:

html, body {
   height: 100%; 
   padding: 0;
   margin: 0;
}

#content {
   min-height: 100%; 
   /* IE6 will need height: 100% defined in an IE6 only stylesheet */
}

#header, #footer {
   height: 100px;  
}    

/* Bring the footer into view */
#footer {
   margin-top: -100px;     /* footer's height */
}

/* Make sure footer doesn't overlap #text element */
#text {
   padding-bottom: 100px;  /* footer's height */
}

You can see it in action here. If you add more filler text you'll see the footer is properly pushed down.

Pat 2010-09-13 00:56:38

It isn't the percentage height I'm having a problem with. I want to have the content div able to be sized to automatically fill the space between the two sidebars and the header and footer. On my page, you can see the div is pushed down below where the white and sidebars stop, while I want it to end at the same spot as these. I did try adding padding, but it doesn't work, in fact it just pushed the white and sidebars up farther. Negative padding does nothing, and neither does adding a margin. Any other ideas? :)

Smartboy 2010-09-13 03:13:30

Answer 2

A:

With liquid layouts like this I tend to set up a really basic table(not as evil as some would say) because they do these kind of auto calculations where you need to figure the browser height/width and minus a certain value for you.

Test this out and see how you go.

http://lm-86.com/html_tests/liquid_header.html

Cheers

Lyndon

Lyndon Mayer 2010-09-13 01:02:30

Answer 3

+1 A:

Have you tried giving it a percent-based height and even a 'position:fixed' footer? Check this out:

http://www.d2burke.com/dev/d2v6/autoheight.html

d2burke 2010-09-13 01:20:18

I have to agree with this. Having a scroll bar in the middle of the page is not all that useful in terms of usability.

Keyo 2010-09-13 01:33:39

ansaurus

tags:

views:

answers:

HTML divs: Auto height and overflow: auto?

related questions