html - 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，蓝色条将消失，页面顶部的空白也会消失。