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と、青いバーが消え、ページ上部のギャップも消えます。