ansaurus

Question

Answer 1

+1 A:

You must ensure your body tag and content container also have heights of 100%. You must explicitly set the height of the parent element(s) for the child to obey.

body { 
    height: 100%;
} 

#content {
    height: 100%;
}

This does not, however, take into consideration positioning of the header. The following post demonstrates a technique utilizing the min-height fast hack by Dustin Diaz and a negative margin on the content container to achieve 100% height while not interfering with the header:

http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/

cballou 2009-11-03 01:47:57

Setting the height of the body and content elements doesn't seem to help. What do you mean by "it does not take into consideration the positioning of the header"?

Nathan 2009-11-03 01:53:07

Answer 2

+1 A:

You said "I'd rather not explicitly set the height of the header if I can avoid it." I'm pretty sure you can't avoid it without switching to tables. That said, here is an example of how you can do it using divs with the header's height set to 50px:

<html>
    <head>
        <style type="text/css">
            html, body {
                margin:0;
            }

            div#content {
                position:absolute;
                top:0px;
                z-index:-1;
                width:100%;
            }

            html, body, div#content, div#navigation-shell, div#details-shell {
                height:100%;
            }

            div#header {
                height:50px;
            }

            div#navigation-shell {
                float:left;
                width:400px;
            }

            div#navigation, div#details{
                padding-top:50px;
            }
        </style>
    </head>
    <body>
        <div id="header"></div>
        <div id="content">
            <div id="navigation-shell">
                <div id="navigation"></div>
            </div>
            <div id="details-shell">                
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

One note: If you want to add backgrounds to the navigation and/or details areas, you will have to actually apply those to the their respective shell divs that encase them. All actual content, however, would go in the inner divs.

sfarbota 2009-11-03 06:45:46

I said that I'd rather not set the height of the header because I don't want to have to know it. My current page header is just some 50pt text, but I might replace this with a graphic later on. I was hoping that I wouldn't need to modify the height/padding property of the navigation div every time I change the header.

Nathan 2009-11-03 15:53:52

I can understand that. However, a fixed height will help to keep a consistent page layout across all browsers. It may be kind of a pain to change the header's height when you change its content, but once you settle on a header you like, you won't have to worry about it anymore. This is all of course up to you, but I'm fairly certain that an auto-sizing header div with 2 full-screen divs below is impossible without the bug.

sfarbota 2009-11-03 16:09:25

ansaurus

tags:

views:

answers:

Set div height to 100% of parent

related questions