position、fixedで可変するヘッダーの下のコンテンツを被らないようにしたいです。

Question

ヘッダーを固定し、レスポンシブで可変型にしたときに、
下のコンテンツでpaddingかmarginをヘッダーの固定の高さ分入れるのですが、
ヘッダーが可変型だと、ウインドウサイズによってずれてくると思うのですが、
これをずれないようにヘッダーの高さが変われば、下のコンテンツの上マージンも可変するといった形は可能でしょうか。

わかりにくいですが、サンプルを作成しました。
こちらの幅を変えてみるとお分かりいただけるかと思います。
https://jsfiddle.net/heyc0nj7/

よろしくお願いいたします。

Answer 1

そこで、position: sticky;を使ってはどうでしょうか？
未対応ブラウザがありますが、polyfillがあります。

position
https://developer.mozilla.org/ja/docs/Web/CSS/position

「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
http://coliss.com/articles/build-websites/operation/javascript/fixed-sticky-for-position-sticky-polyfill.html

scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介（脱jQuery）
https://mae.chab.in/archives/59690

Comments

[jyoze]

x_xさん
ありがとうございます。
すみません。position: stickyの使い方がいまいちわからないのですが、
今回の場合、どのように設定すればよろしいでしょうか。

[x_x]

position: fixedの代わりにstickyってことです。

[jyoze]

x_xさん
ありがとうございます。
position: stickyを設定することで、うまく動きました。
ブラウザによっては未対応であったり、バグがあるようですが、
今回は主にモバイル時に必要でしたので、今回はこの設定を利用させていただきます。
ありがとうございました。

Answer 2

こんにちは。

「%」じゃなくて「vw」で指定してみては？
ブレイクポイント設定してやれば問題ないかと。

#container {
  height: 1000px;
  padding-top:25vw;
}

Comments

[jyoze]

kogureさん
ありがとうございます。
ブレイクポイントを設定し、「vw」を指定しましたが、やはりヘッダーの高さが変化すると、多少なりともズレ表示てしまします。ブレイクポイントを沢山増やすと可能ではあると思いますが・・・。