0

几个小时后，我设法找到了解决问题的方法，所以问题不是“如何”，而是“为什么会这样”。这是我的精简示例：

<div id="header">
    <div id="header-element">header</div>
</div>
<div id="footer">footer</div>​

CSS：

#header {
    width: 100%;
    position: relative;
    padding-bottom: 5%;
}
#header-element {
    position:absolute;
    bottom: 0;
}
#footer {
    position: relative;
    margin-top: 5%;
}​

和 jsFiddle - http://jsfiddle.net/H7jwm/3/。

我的问题是如何使用百分比来定位那些相对定位的元素，第一个元素位于文档顶部的某个位置，第二个元素位于第一个元素的位置。我已经通过给予padding-bottom第一个和margin-top第二个来实现这一点，但我必须用蛮力解决 - 尝试每一个远程逻辑解决方案。现在，如果您删除填充，margin-top则第二个元素的边距成为该元素与文档顶部之间的边距，而不是第一个元素，并且该第一个元素将剩余空间“占用”到顶部。

问题是为什么填充会这样工作？或者，换个说法，填充如何与相对定位一起工作？

4

1 回答 1

0

实际上，您正在混合职位。你#header的高度为零。没错，零就像什么都没有，因为它没有相对的内容。#header-element是绝对定位#header的，因为高度为 0，它恰好位于 padding-bottom 空间中。

因此，如果您从 中删除 padding-bottom，则从#header文档#footer顶部开始向上移动。由于margin-top，文档顶部边框和单词“footer”之间有一些空间。

但是您仍然拥有绝对定位#header-element的 ，它现在就在那个边缘顶部空间中。

于 2012-05-29T13:42:44.457 回答