未知の可変高さの固定ヘッダーの下に行くコンテンツ

Question

<header>私はディスプレイの上部にposition: fixed;です。

これの自然な結果は、<main>が相当に大きい<header>の下に終わることです。

私はこれまでにこの問題に直面し、<main>の簡単なmargin-top割り当てで解決しました。ここで問題は少し異なります。

<header>の高さは不明で、不明です。それは、5pxの上下のパディングと5pxのボトムマージンを持っています。明示的に設定された高さはありません。それは内の内容によって決定されます。

<header>の最大の要素は、高さが20vhに割り当てられている画像です。 <h1>および<h3>もまたあり、<vh>単位を使用してサイズ変更されています。私は<main>をオフセットすることができないということを知っているので、常にこの動的サイズの応答性のある<header>の下にあります。

私はSOをブラウズしてきましたが、これを解決する解決策は一件も見つかりませんでした。多くのアイデアは、JavaScriptを使ってウィンドウのサイズ変更をキャッチすること、ヘッダーの計算された高さを取得すること、そしてマッチのトップをメインに割り当てることにのみ依存しています。私はこのアプローチがパフォーマンスを低下させ、JSがスクロールに追いつくので、厄介なページジャンプ/飛び跳ねなどを導入することを恐れる。

レスポンシブデザインでは通常どのように問題に取り組んでいますか？理想的には、私はこの問題に対する純粋なCSSソリューション、あるいは `position：fixed; 'の回避策を探しています。パフォーマンスを妨げないエレガントで汎用性の高いJSソリューションです。この問題は、私の問題を引き起こしています。なぜなら、絶対的な/固定的な頭痛の頭痛を解決しようとする私の通常の試みのどれも助けてくれないからです。

アドバイスをいただければ幸いです。

-Ilmiont

Answer 1

私はthis postをチェックします。彼らは、第2のヘッダーまたはjavascriptを使用してコンテンツをプッシュダウンすることに言及しています。

私の推測では、javascriptはよりクリーンなアプローチであり、余分なコンテンツや不要なリクエストがサーバーに加えられることはありません。