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

以下是我对以下问题的回答：

我希望页眉保持在身体的最顶端，页脚保持在身体的最底部。我在页眉和页脚之间有一个content div（position:relative），当我在div周围设置一个边距时，绝对位置的页眉和页脚会从其顶部/底部位置移动该边距的高度（当我尝试在div中的段落上方和下方设置边距时，也会发生这种情况）。在小提琴中，你可以看到页脚并没有附着到底部，即使它是绝对定位的（我继续，使页眉是静态的，因为静态给出了预期的结果）<“强”>如何将页眉和页脚定位到主体的顶部和底部，而中间没有内容移动这两个元素？< /强>如果位置：绝对元素从流中移出，为什么会有任何影响它们的位置？

我试着在这里和谷歌搜索“CSS边距影响绝对值”和其他一些短语，但都没有用。我在开发人员工具中使用它时发现了这一点：

• 度量显示主体是html元素的高度减去一个边距（仍然影响页脚的边距）的量。因此，主体必须延伸到content div的高度，因为主体内的文档流中没有其他内容可以定义其高度。但该高度在内容结束的地方结束，而不是在边距之后。它不应该包括保证金吗
• 如果我将主体的高度设为100%，则页脚的位置 将其自身移动到视口底部，然后在该视口中保持固定 当我滚动的时候。为什么它不把自己连接到机器的底部 主体而不是视口的底部

---

看着你的承诺，我想我理解你想要实现的目标。您可以使用以下选项：

以下是如何将其与现有代码集成：

最后两个问题的答案

• “但是[正文]的高度在内容结束的地方结束，而不是在页边空白之后。它不应该包括页边空白吗？”回答：不，正文本身不受其内元素底部页边空白的影响
• “如果我将主体的高度设置为100%…为什么它不将自身附着到主体的底部而不是视口的底部？”回答：它附着到

  主体的底部

  ，因为通过将高度设置为

  100%

  ，您已经将

  主体

  设置为视口高度

按相反顺序回答你的主要问题

• “如果位置：绝对元素被移出流，为什么会有任何东西影响它们的位置？”回答：影响它们位置的是身体元素的位置。在回答上述第一个问题时，内部元素上的边距可能会导致

  主体

  中的元素远离视口底部，从而导致

  主体

  自身与视口底部的间隙达到该距离。然后，当您将一个元素定位到

  主体

  时，它将被隔开，因为主体未与视口底部齐平。这是你在小提琴的底部区域看到的
• “如何将页眉和页脚定位到正文的顶部和底部，中间没有内容移动这两个元素？”回答：亚当的原始答案<代码>固定< /COD>是一种方法，基于严格的你的博文问题（他已经修改了它）。然而，您在一条评论中明确表示，您真正想要的是“如果内容较短，我希望页脚位于视口底部。如果内容较长，我希望页脚跟随内容并触摸页面的左下角和右下角。”Adam最初回答的

  固定
  定位无法实现这一点（他也意识到）. 而是：

这样做

html{height:100%}
车身{最小高度：100%；}
div{
保证金：20px 20px 0 20px；/*消除你的底线保证金*/
填充底部：50px；/*使用底部填充为页脚获取空间*/
}

---

有没有理由将页脚绝对放在第一位？它已经在你想要的底部了。谢谢，@sachlen。这是因为我不希望页脚紧跟在内容之后。如果内容较短，我希望页脚位于视口底部。如果内容很长，我希望它跟随内容并触摸页面的左下角和右下角。这有意义吗？在这里，我分叉了JSFIDLE并显式地将页脚设置为静态。它的位置正确，内容很多，但内容很少，它不在视口的最底部：感谢粘性页脚@ScottS你的回答也很好，我在阅读Sticky Footer的信息时考虑了这个解决方案，但在我的整个项目中，如果我使用填充解决方案，我的内部内容的边框和背景颜色仍然会与页脚重叠。还感谢对所有问题的透彻解释。尽管我以后还要进一步探究你的第一个答案。我发现当我给主体添加边框时，底部没有空白（），所以我仍然不明白为什么会有空白。