【发布时间】：2012-12-20 07:18:43
【问题描述】：
目前我正在为自己开发一个网站。我决定进行页眉内容页脚设计，其中页脚应始终粘在底部。因此，我设置了一个包含 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 来实现相同的效果（为页脚保留空间），而不是使用 #middle 的 padding-bottom，但是 margin-底部不适用于它。我读过 min-height 不考虑填充、边框或边距，但这里考虑了填充，而边框和边距不考虑。
当#middle 使用 margin-bottom 而不是 padding-bottom 时，FF 和 Chrome 表现出不同的行为：虽然 Chrome 只是忽略了边距，但 FF 在 #wrapper 下方应用了它。我的总体想法是，我的容器应该以最小高度增长到其内容的总大小，包括高度+填充+边框+#middle的边距，但显然它只是增长到#top的整体大小+高度# #middle 的中间 + 内边距。
我想知道什么是正确的行为以及为什么填充和边距不能互换以保留页脚空间。
虽然非常感谢您的解释，但我也很感谢您提供指向可以帮助我的来源的链接。如果这与另一个帖子重复，我很抱歉，但我没有找到适合我的特殊问题的东西（无论是在这里还是通过 Google）。
谢谢！
【问题讨论】：
-
如果您在帖子中发布了一些相关代码，这将有所帮助。页脚粘在底部意味着无论您在页面上的哪个位置滚动都始终可见，或者它位于页面的最底部并且只有在您向下滚动时才能看到它？
-
您好！抱歉，因为这是我在这里的第一篇文章，我只是不想发送太多垃圾邮件，并认为使用已经显示示例的 pastebin 是个好主意。卡在底部意味着它始终位于页面的最后，因此如果页面上的内容多于空间，则您必须向下滚动。
-
不用担心。在 SO 上获得最佳答案的问题往往简洁明了，并包含简化的代码示例。我认为您在这里没有得到太多关注，因为您的问题相当冗长，大多数人都不会费心去解读它。发布小提琴或代码示例非常适合演示代码，但鼓励直接在帖子中包含示例以方便阅读（更不用说链接失效了）。
-
感谢您的反馈。我会尽量让我的问题更简短，将来更切题。因为我不想重复这个问题，所以可能为时已晚，因为这个问题引起了太多关注：你是否也有这样的想法？谢谢。
标签： css