Facebook固定标题没有边距或填充底部

Question

只是想知道为什么Facebook固定标题没有边距或填充底部但其globalContainer完全保留在固定标题之后？

Answer 1

标题栏位于固定高度的容器内。本质上，代码看起来像这样（简化）：

<div id="blueBarHolder">
    <div id="blueBar">...</div>
</div>
<div id="globalContainer">...</div>

CSS：

#blueBarHolder {
    height: 42px;
}
#blueBar {
    position: fixed;
    /* ... */
}

blueBarHolder和globalContainer元素都是正常文档流程的一部分。由于blueBarHolder被赋予固定的高度，因此会占用空间，导致globalContainer出现在其下方。只有blueBar元素本身才有fixed定位。

如果您要将display: none添加到blueBar，则blueBarHolder元素仍会显示在页面上，它只是一个空框。同样，如果您将display: none添加到blueBarHolder，则蓝色条会消失，页面顶部的间隙也会消失。