Question

我的结构和布局非常简单。

它们之间有一个#header和一个#footer，#body-container。 #header为position: fixed。

#body-container有一个margin-top: 3.1em为#header腾出空间，height: 3em有#header，，但这不会像我想象的那样有效即可。即使#header 不是容器的子容器，它也不会呈现在容器上方（即在边距内）。

为什么#body-container不在<body> <div id="header"> </div> <div id="body-container"> <div class="left"> </div> <div class="right"> </div> </div> <div id="footer"> </div> </body>的上边缘呈现？我怎样才能达到预期的效果？

您可以fiddle with it here，代码可供参考：

HTML：

div {
    margin-bottom: 0.1em;
    background-color: #99ccff;
}

#body-container {
    background-color: white;
    margin-top: 1.1em;
    width: 20em;
    height: 35em;
}

.left {
    width: 2.5em;
    height: 100%;
    float: left;
}

.right {
    margin-left: 2.6em;
    height: 100%;
}

#header {
    background-color: #99eeee;
    position: fixed;
    height: 3em;
    width: 20em;
    z-index: 1;
}

#footer {
    height: 3em;
    width: 20em;
}

CSS：

{{1}}

Answer 1

这是一个有趣的效果。看起来#body-container推动了身体的边缘，它影响了固定头的位置。这是因为标题设置没有坐标。添加以下规则集以将标题置于页面的最顶部：

#header {
    top: 0;
    left: 0;
}

另一种防止#body-container边距影响标题放置的方法是在body元素上设置padding。下面的规则集将消除#body-container的margin-top的影响，并保持固定的#header与其他内容对齐，如果#header不使用坐标。

body {
    padding: 20px;
}

Answer 2

效果称为“margin collapse”，也在this thread中讨论。保证金崩溃行为已被指定和预期。

从询问开始，我已经了解了几种方法可以达到预期的效果。工作的jsfiddles是链接的：

Add negative margin-top to #header.

这对我来说最干净。
Move the #body-container's margin-top to padding-top.

如果事情变得复杂，这必然会破坏一些可能的CSS样式/布局属性，并且确实会在页面顶部和标题之间留下空隙。
Exactly specify the #header coordinates with top and left properties.

请参阅@ DRD的回答。
Add any nonzero padding to the body.

再次，请参阅@ DRD的回答。

标题div服从兄弟容器div的边缘。非常困惑

2 个答案: