Having issues with my

问题:

I have a 3 container structure. container 1 is of x height...container 2 fills the rest of the window...container 3 SHOULD start after container 2, but its disappeared.

JSFIDDLE

HTML

<header>
</header>
<div id="maincontent">
</div>
<footer>
</footer>

css:

html,body{padding:0; margin:0;}

    header{
        background-color:red; 
        height:1.8em;
    }
    #maincontent{
        background-color:black; 
        position:absolute;
        top:1.8em;
        bottom:0;
        width:100%;

    }
    footer{
        background-color:yellow;
        height:50px;
    }

How can i get container 3 (footer to follow container 2). I know its position absolute of container 2 thats causing the problem but thats the only way I can get that container to fill the screen.

I've tryed playing around with margins to no avail;

Clearer explanation of what i'm trying to achieve:

container1 + container 2 = 100% height. Then scroll to see containe 3.

I could acheive this in javascript but was hoping it was possible in css.

回答1:

Because #maincontent has absolute positioning, footer is behind it below header.Use position: absolute to put footer at the bottom of the page; then change bottom: 0 to bottom: 50px for #maincontent. Fiddle: http://jsfiddle.net/xFWHk/1/

回答2:

Change #maincontent's bottom property to the height of your footer, ie:

#maincontent {
   top: 1.8em;
   bottom: 50px /* Height of footer */
}

回答3:

Here's a fix: http://jsfiddle.net/xFWHk/2/ ... You don't need absolute positioning in your case as "container 2" will follow "container 1" as the natural flow of the document. CSS:

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

    header{
        background-color:red; 
        height:1.8em;
    }
    #maincontent{
        background-color:black; 
        width: 100%;
        height: 100%;

    }
    footer{
        background-color:yellow;
        height:50px;
    }

回答4:

I've solved it, FINALLY!

footer{
        background-color:yellow;
        height:50px;
        width:100%;
        position:absolute;
        bottom:-50px;
    }

added absolute to the footer and a negative margin. Will see how this goes.