固定ヘッダー分の高さをヘッダー以下のメインコンテンツでどのように確保するのが好ましいのか？

Question

質問

position: fixedでヘッダーを固定すると、ヘッダーが通常のフローから切り離されるので、ヘッダーに続くメインコンテンツ部分がbody要素を基準に配置されると思います。

このままだと、ヘッダー部分にメインコンテンツ部分が重なってしまうため、ヘッダーの高さ分、メインコンテンツの
Y方向の位置を調整してあげる必要があると理解しています。

そこでなのですが、どのようにメインコンテンツのY方向の位置を調整するのが好ましいのか、考え方など教えて頂けませんでしょうか？

対策案は４つあると思って試してみました。margin-topで調整する案はヘッダーのY方向の位置も移動してしまうので選択肢からは外れました。

残り３つは同じ結果を得られているのですが、どの方向が好ましいとかあったら教えていただきたいです。

それぞれ、メリデリやこういうケースの場合はこちらが好ましいなどの使い分けはありますか？

画像

HTML（サンプルコード）

<div class="outer">
  <header>
    <h1>Fixed Header</h1>
  </header>
  <div class="inner">
    <main>
      <article>
        <h2>Hello World</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident possimus asperiores, earum atque, vel consequatur aut voluptates soluta ullam dolorem eos. Nam sed, veniam nisi odio doloremque unde provident vitae!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident possimus asperiores, earum atque, vel consequatur aut voluptates soluta ullam dolorem eos. Nam sed, veniam nisi odio doloremque unde provident vitae!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident possimus asperiores, earum atque, vel consequatur aut voluptates soluta ullam dolorem eos. Nam sed, veniam nisi odio doloremque unde provident vitae!</p>
      </article>
    </main>
    <footer>
      <h2>Footer</h2>
    </footer>
  </div>
</div>

CSS (サンプルコード)

* {
  box-sizing: border-box;
}

body, h1, h2 {
  margin: 0;
}

.outer {
  width: 600px;
  margin: auto;
}

header {
  background-color: gray;
  position: fixed;
  height: 5rem;
  padding: 1rem;
  z-index: 100;
  width: 600px;
}

.inner {
  --header-vertical-space: 6rem;
  
  /* (1)padding-topで調整する場合 */
  /*
  padding-top: var(--header-vertical-space);
  */
  
  /* (2)position topで調整する場合 */
  /*
  position: relative;
  top: var(--header-vertical-space);
  */

  /* (3)translateYで調整する場合 */
  /*
  transform: translateY(var(--header-vertical-space));
  */

  /* (4) margin-topで調整する場合 */
  /* これだと、ヘッダーのY方向の位置も移動してしまうので、この選択肢は駄目なようだった */
  /*
  margin-top: var(--header-vertical-space);
  */
}

footer {
    background-color: gray;
    padding: 1rem;
}

Answer 1

個人的には、1か4です。

2は、親要素からあふれているのが気になります。
3は、スタッキングコンテキストを生成するので、レイアウトに影響が出る場合があります。これだけはなるべく避けると思います。

4についてヘッダごと下がってしまう件は、親子間のマージン相殺なので、対処法はあります。

Comments

[murabito]

ありがとうございます。（３）がNGということであれば、（２）も同様にスタッキングコンテキスト生成により非推薦といった感じでしょうか？スタッキングコンテキストが作られることでデメリットなのは、例えば、今回であれば`.inner`の中にfooter入れていますが、もしfooterが`.inner`の外だった場合に、`.inner`のコンテンツとfooterが重なってしまうから、保守性よくないよねって感じでしょうか？

4のマージン相殺による解決は試してみます！個人的にはpaddingは親子間のスペース用に使うのがしっくりくるので、ヘッダー分のスペース確保のためにpadding-top使うアプローチは違和感あるのですよね。でも、padding-topのアプローチはよく見かけますよね。

[Lhankor_Mhy]

（２）はスタッキングコンテキストを生成するのでしたっけ……？
スタッキングコンテキストが生成されることを回避した方がいいのは、主に重ね合わせ順に関することだと思います。ご指摘の点ももちろん気になりますが。

親子間マージン相殺の対処は、個人的には display: flow-root をお勧めします。

[murabito]

「position の値が absolute または relative であり、かつ z-index の値が auto 以外の要素」とMDNにあるので、今回はz-indexをつけてなかったので該当しないみたいですね。

> 親子間マージン相殺の対処は、個人的には display: flow-root をお勧めします。

flow-rootでマージン相殺対応も出来たのですね！flexboxも上下のマージン相殺おこならないとかあったので、その類ですかね。試してみます。ありがとうございます。