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，則藍條會消失，頁面頂部的間隔也會消失。