可変高さの「位置：固定」要素からコンテンツをクリアする方法は？

Question

ウェブサイトにヘッダーがあり、その高さは多くのサーバー側の要因に基づいて変化します。ユーザーがページをスクロールすると、ヘッダーが一番上に残るようにヘッダーを固定位置に変更するように要求されています。私はこの効果を達成するためにposition: fixedを使用しています。問題は、ヘッダーが高すぎると、コンテンツの一部の上に（たとえ上にスクロールしても）配置されることです。ヘッダーを超えて拡張するためにコンテンツdivにトップマージンを適用することはできますが、前述したように、マージンの値はCSSが利用できない多くの要因によって大きく異なります。コンテンツの一部をレンダリングするようブラウザに指示する簡単な方法はありますか固定レイヤー？

コンテンツにclearを適用しようとしましたが、何もしませんでした。私はJavascriptでこれを行うことができますが、私はCSSベースのソリューションを探しています。

Answer 1

私は考えられません。要素にposition: absoluteまたはposition: fixedを割り当てると、効果的に文書のフローから削除され、その寸法はその兄弟には関係しなくなります。

Answer 2

あなたは簡単にはJavaScript

jQuery(document).ready(function() { 
    header_height = $("#header").height(); 
    $("#main-content").css("padding-top", header_height); 
}); 

を使用してそれを行うことができます