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，则蓝条会消失，页面顶部的间隔也会消失。