2

目前我正在为自己开发一个网站。我决定进行页眉内容页脚设计，其中页脚应始终粘在底部。因此，我设置了一个包含 position: relative 的包装器，包含页眉 (#top)、内容 (#middle) 和页脚 (#bottom)。底部得到位置：绝对顶部：0。

我还为 html 和 body 设置了 height: 100% 并为#middle 设置了适当的 padding-bottom 以确保我的页脚不会与#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;}

现在这是我的问题：我对 box-model 的理解是，应该能够使用 margin-bottom 而不是 padding-bottom 来实现相同的效果（为页脚保留空间）而不是 padding-bottom 用于#middle，但 margin-bottom 不是' t 适用于它。我读过 min-height 不考虑填充、边框或边距，但这里考虑了填充，而边框和边距不考虑。

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

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

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

谢谢！

4

1 回答 1

0

我遇到了和你一样的问题。

您必须使用这段代码。

    ＃中间 {
        显示：表格；
        保证金：2% 自动；
        宽度：100%；
    }

使用显示：表格适用于我从顶部和底部设置边距。

于 2012-12-20T07:26:59.603 回答