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

Question

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

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

我尝试在此处和 Google 上搜索“CSS 边距影响绝对值”和其他一些短语，但均无济于事。我在开发者工具中使用它时发现了这一点：

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

Answer 1

回答最后两个问题

• “但是 [正文] 的高度在内容结束处而不是在边距之后结束。它不应该包括边距吗？” 答案：不，body 高度本身不受其中元素下边距的影响。
• “如果我将身体的高度设为 100%……为什么它不将自己连接到身体的底部而不是视口的底部？” 答案：它附加到body 的底部，因为通过将高度设置为100%，您已将body 设置为视口高度。

以相反的顺序回答您的主要问题

• “如果位置：绝对元素被移出流程，为什么会影响它们的位置？” 答案：影响他们位置的是那个body元素的位置。在回答上面第一个问题时，内部元素上的边距会导致body 内的元素远离视口的底部，从而导致body 本身与底部的间隙那个距离的视口。然后，当您将元素定位到body 时，它会出现间隙，因为主体未与视口底部齐平。这就是您在小提琴的页脚区域看到的内容。
• “如何将页眉和页脚定位到正文的顶部和底部，而不让中间的内容移动这两个元素？” 答案：Adam 对fixed 的原始答案是一种方法，完全基于你的粗体问题（他已经修改了它）。但是，您在评论中澄清了您真正想要的是“如果内容很短，我希望页脚位于视口底部。如果内容很长，我希望它跟随内容并触摸左下角和右下角这页纸。”亚当对fixed 定位的原始答案不会实现这一点（正如他也意识到的那样）。而是：

这样做

html {height: 100%}
body {min-height: 100%;}

div {
    margin: 20px 20px 0 20px; /* eliminate your bottom margin */
    padding-bottom: 50px; /* use bottom padding to get space for footer */
}

See short content fiddle.

See long content fiddle.

Answer 2

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

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

您可以通过以下方式将其与现有代码集成：

http://jsfiddle.net/wJSZD/