2017-08-31 3 views
0

通常、ボディーコンテンツを固定ナビゲーションの下にレンダリングしないように、ボディーエレメントにpadding-topを追加します。ボディパッディングにハード値を使用しない固定ヘッダー

ボディパッディングにハードユニットの値、ヘッダーの高さ、またはその両方を指定しなければならないため、これは嫌いです。ヘッダーにハードコードされた高さを付けることを嫌って、各ブレークポイントのスタイリングがさらに厄介になります。

ハードユニットの値を使用せずに本文のコンテンツと重複しない固定サイズの固定ヘッダーを使用するにはどうすればよいですか?私はJavaScript、CSSのみを使用することに興味はありません。

は、ここで私が参照しています何の過度に単純化した例です。将来のCSS標準でhttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_menu

+0

私はそれがNAVは、(流れのうちのゆえと)固定されたときにNAVの下に座って体を持つことが可能だとは思いません。私の普通の解決策は、あなたが言うように、ボディに 'padding-top'がありますが、それを変数に設定します。 [css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)を使用すると、設定内のブレークポイントに基づいた高さを1つの変数として設定し、ベースで1回アクセスすることができますレイアウトスタイル。しかし、私が知っている限り、それは魔法の番号かJSです。 – fredrivett

+0

DOMの同じ場所に座っているダミーのdivを持つようなハックなソリューションが必要な場合、固定されたnavは固定されていない場合は論理的に表示され、navと同じ高さになります。これは実際にはパディングトップを使用するよりも優れていません。実際、それはおそらく悪化しています –

答えて

0

、あなたは変数として、ヘッダーの高さを設定し、bodypadding-topでそれを使用することができます。

この時点で、SCSS、SASS、PostCSS-cssnextなどの異なるCSSプリプロセッサを使用して、この目標を達成できます。

参考: https://drafts.csswg.org/css-variables/

関連する問題