4

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

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

我试过在这里和谷歌搜索“CSS 边距影响绝对”和其他一些短语无济于事。我在开发人员工具中使用它时发现了这一点：

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

2 回答 2

2

回答你的最后两个问题

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

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

  • “如果位置：绝对元素被移出流程，为什么会影响它们的位置呢？” 答：影响他们位置的是那个身体元素的位置。在回答上面第一个问题时，内部元素上的边距会导致内部元素body远离视口的底部，从而导致其body自身与视口的底部间隔该距离。然后，当您将元素定位到 时body，它会出现间隙，因为主体未与视口底部齐平。这就是您在小提琴的页脚区域看到的内容。
  • “如何将页眉和页脚定位到正文的顶部和底部，而不让中间的内容移动这两个元素？” 答案：亚当的原始答案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 */
}

见短内容小提琴。

请参阅长内容小提琴。

于 2012-07-06T03:11:52.370 回答
1

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

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

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

http://jsfiddle.net/wJSZD/

于 2012-07-06T02:37:27.197 回答