CSS min-height 100% with multiple divs

问题

Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.

I currently have a layout as so:

<html>
<body>
    <div class="container">
         <div class="header">
         </div>
         <div class="content">
         </div>
         <div class="footer">
         </div>
    </div>
</body>
</html>

Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).

Any ideas? Cheers.

回答1:

You can do this with simple display:table property.

Check this:

http://jsfiddle.net/HebB6/1/

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
    display:table;
    width:100%;
}

.content {
    background-color: blue;
}

.header {
    height: 80px;
    background-color: red;
}

.footer {
    height: 80px;
    background-color: green;
}
.content, .header, .footer{
    display:table-row;
}

回答2:

original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html

http://jsfiddle.net/cLu3W/4/

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}
div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}

回答3:

I don't have chrome right now and this doesn't seem to be working in jsfiddle but you should be able to achieve this by making all absolute positioned, having header have top set at 0px, footer bottom at 0px, and content have top: 80px, bottom 80px. You'll also have to make the container, body, and possibly html take up 100% height and have absolute or relative positioning.

回答4:

 *{margin:0; padding:0;}
 .header{height:80px;  background:salmon; position:relative; z-index:10;}
 .content{background:gray; height:100%; margin-top:-80px;}
 .content:before{content:''; display:block; height:80px; width:100%;}
 .footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}

This is not perfect. For example, what happens when the text overflows .content is really not ideal, but you could solve this problem by using height based media queries to simplify the design for smaller screens.

回答5:

This can be achived in multiple ways:

Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Using absolute positioning

I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/

HTML:

<html>
<body>
    <div class="container">
         <div class="header">
             Header
         </div>
         <div class="content">
             Content
         </div>
         <div class="footer">
             Footer
         </div>
    </div>
</body>
</html>

CSS:

html,
body,
.container {
    height: 100%;
    background-color: yellow;
}

.container {
    position: relative;
}

.content {
    background-color: blue;
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 0;
    right: 0;
}

.header {
    height: 80px;
    background-color: red;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.footer {
    height: 80px;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

来源：https://stackoverflow.com/questions/8264499/css-min-height-100-with-multiple-divs

标签

html

height

css