HTML divs: Auto height and overflow: auto?_问答_开发者

HTML divs: Auto height and overflow: auto?

开发者 https://www.devze.com 2023-01-16 01:57 出处：网络

I am trying to design a site which includes a content area with overflow: auto and a dynamic height. Preferably, I\'d like to be able to put a header up top and a footer down below the overflow: auto

相关专题：css

I am trying to design a site which includes a content area with overflow: auto and a dynamic height. Preferably, I'd like to be able to put a header up top and a footer down below the overflow: auto div, and have that div take up the rest of the space, but s开发者_开发问答o far this has proved difficult. Height: auto doesn't work, and overflow: auto requires a height so I can't just not set it. Any ideas? My code can be found here: http://abbottconstruct.com/wp-content/themes/abbott/index.html

Thanks to anyone whom helps.

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

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.

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