Question

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

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％高度。然后滚动查看容器3。

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

Answer 1

由于#maincontent具有绝对定位，footer位于header之后。position: absolute将footer放在页面底部;然后将bottom: 0更改为bottom: 50px #maincontent。小提琴：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;
    }

Answer 4

我已经解决了，最后！

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

向页脚添加绝对值并为负余量。会看到这是怎么回事。

我的<footer> </footer>有问题

4 个答案: