CSS：最小高度与边距和填充相结合的正确行为

Question

目前我正在为自己开发一个网站。我决定采用页眉内容页脚设计，其中页脚应始终粘在底部。因此，我设置了一个位置为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;}

现在我的问题是：我对盒子模型的理解是，应该能够使用 margin-bottom 而不是 #middle 的 padding-bottom 来实现相同的效果（保留页脚的空间），但 margin-bottom 不是没有应用到它身上。我读到最小高度不考虑填充、边框或边距，但这里考虑填充，而边框和边距则不考虑。

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

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

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

谢谢！

Answer 1

我也遇到过和你一样的问题。

你必须使用这段代码。

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

使用

display : table

可以帮助我设置顶部和底部的边距。