绝对定位的元素移动了另一个元素的边距

Question

这是我的 jsFiddle 对于以下问题： http: //jsfiddle.net/arelia/Rruxf/

我希望页眉位于正文的最顶部，页脚位于正文的最底部。我在页眉和页脚之间有一个内容 div（位置：相对），当我在 div 周围设置边距时，我绝对定位的页眉和页脚从其顶部/底部位置移动该边距的高度（当我尝试在 div 中的段落上方和下方设置边距）。在小提琴中，您可以看到页脚没有附加到底部，即使它是绝对定位的（我继续将页眉设为静态，因为静态给出了预期的结果）。如何将页眉和页脚定位到正文的顶部和底部，而不让中间的内容移动这两个元素？如果position:absolute元素被移出流，为什么会影响它们的位置呢？

我尝试在这里和谷歌搜索“CSS边距影响绝对值”和其他一些短语，但无济于事。我在开发者工具中进行更多尝试时发现了这一点：

• 指标显示正文是 html 元素的高度减去一个边距（仍影响页脚的边距）的量。因此，主体必须拉伸到内容 div 的高度，因为主体内的文档流中没有其他任何内容来定义其高度。但该高度在内容结束处结束，而不是在边距之后结束。不应该包括边际吗？
• 如果我将正文的高度设为 100%，则页脚会将其自身定位到视口的底部，然后在滚动时保持固定在该位置。为什么它不将自身附加到主体的底部而不是视口的底部？

Answer 1

看了你的评论，我想我明白你想要实现的目标。你可以使用这个：

http://ryanfait.com/sticky-footer/

以下是将其与现有代码集成的方法：

http://jsfiddle.net/wJSZD/