Question

目前我正在为自己的网站工作。我决定采用标题内容页脚设计，其中页脚应始终粘在底部。因此，我设置了一个包含position：relative的包装器，包含标题（#top），content（#middle）和footer（#bottom）。底部得到位置：绝对顶部：0。

我还设置了高度：html和body的100％以及#middle的适当填充底部，以确保我的页脚不会重叠#middle。

请在此处找到简化的示例版本：http://www.webdevout.net/test?0w

这是有问题的CSS：

* {
    padding: 0;
    margin: 0;
}

html, body {height: 100%}

#wrapper {
    position: relative;
    background-color: #ccc;
    min-height: 100%; 
}

#middle {
    background-color: #900;
    padding-bottom: 200px;
}

#top, #bottom {
    width: 100%;
    height: 200px;
    background-color: #bb5;
}

#bottom {position: absolute; bottom: 0;}

现在这是我的问题：我对盒子模型的理解是，应该能够实现相同的（保持页脚空间）边缘而不是#middle的填充底部，但是边缘 - 底部不适用于它。我已经读过min-height不考虑填充，边框或边距，但是边框和边距不是这里考虑的填充。

当使用margin-bottom代替#middle的padding-bottom时，FF和Chrome显示不同的行为：而Chrome只是忽略了边距，FF在#wrapper下面应用它。我的一般想法是我的容器应该增长到其内容的总大小与最小高度，包括高度+填充+边界+ #middle的边距，但显然它只是增长到＃top的整体大小+＃的高度#middle的中间+填充。

我想知道什么是正确的行为以及为什么填充和边距不可互换以保持页脚的空间。

虽然我会非常感谢您的解释，但我也非常感谢能够帮助我的链接。如果这个帖子与另一个帖子重复，我很抱歉，但我没有找到适合我特殊问题的东西（无论是在这里还是谷歌）。

谢谢！

Answer 1

我遇到过像你面临的同样问题。

你必须使用这段代码。


    #middle {
        display: table;
        margin: 2% auto;
        width: 100%;
    }

使用display：table对我来说可以从上到下设置边距。

CSS：最小高度的正确行为与margin＆amp;填充

1 个答案: