我的 <footer> 有问题答案

【问题标题】：Having issues with my <footer>我的 <footer> 有问题
【发布时间】：2013-04-04 06:50:05
【问题描述】：

我有一个 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 的绝对位置，但这是我可以让该容器填满屏幕的唯一方法。

我尝试过使用边距，但无济于事；

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

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

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

【问题讨论】：

标签： html css footer

【解决方案1】：

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

【讨论】：

页脚必须滚动，我不希望它从页面开始。

【解决方案2】：

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

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

【讨论】：

【解决方案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;
    }

【讨论】：

我希望页脚在窗口滚动后直接跟随。所以 header+maincontainer=100% 高度。然后页脚跟随
这就是我的回答，除非我误解了你，否则请查看jsfiddle.net/xFWHk/2。
您的答案是页脚为 100% + 页眉高度。但没关系，我已经解决了。 jsfiddle.net/xFWHk/5
那么您所要做的就是将margin-bottom:-1.8em; 添加到footer jsfiddle.net/xFWHk/6 .. 很高兴您找到了解决方案，但我仍然认为在这种情况下不需要绝对定位，因为html 无论如何都会为你做这件事。

【解决方案4】：

我已经解决了，终于！

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

在页脚中添加了绝对值和负边距。看看情况如何。

【讨论】：