Question

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

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

我已经尝试在这里搜索Google和＃34; CSS边距影响绝对值＆＃34;和其他一些短语无济于事。我在开发人员工具中使用它时发现了这一点：

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

Answer 1

回答你的两个问题

“但是[身体]的高度在内容结束而不是在保证金之后结束。不应该包括保证金吗？” 答案：不，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 */
}

See short content fiddle.

See long content fiddle.

Answer 2

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

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

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

http://jsfiddle.net/wJSZD/

绝对定位的元素由另一个元素的边缘移动

2 个答案:

回答你的两个问题

以逆序回答您的主要问题

执行此操作