html - 我的问题

Question

我有一个 3 容器结构。容器 1 的高度为 x...容器 2 填充了窗口的其余部分...容器 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 的绝对位置，但这是我可以让容器填满屏幕的唯一方法。

我试过玩弄利润无济于事；

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

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

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

Answer 1

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

Answer 2

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.

Answer 3

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

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

Answer 4

这是一个修复： 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;
    }