我的<footer>有问题

Question

我有一个3个容器结构。容器1是x height...container，2填充了window...container 3的其余部分，应该在容器2之后开始，但它消失了。

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;
    }

如何获取容器3(跟随容器2的页脚)。我知道容器2的绝对位置，这是导致问题的原因，但这是唯一能让容器填满屏幕的方法。

我已经尝试过了，但都没有用；

更清晰地解释我想要实现的目标：

container1 +容器2= 100%高度。然后滚动查看containe 3。

我可以在javascript中实现这一点，但我希望它可以在css中实现。

Answer 1

因为#maincontent有绝对定位，所以footer在它后面的header.Use position: absolute下面将footer放在页面底部；然后将bottom: 0更改为#maincontent的bottom: 50px。小提琴：http://jsfiddle.net/xFWHk/1/

Answer 2

将#maincontent的bottom属性更改为页脚的高度，即：

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

Answer 3

这里有一个解决方案：http://jsfiddle.net/xFWHk/2/ ..。您不需要绝对定位，因为“容器2”将跟随“容器1”作为文档的自然流。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;
    }