CSSの位置：固定ヘッダ

Question

私、それは他の要素の上にとどまり、それを隠す理由position:fixedと固定ヘッダを持っているので、headerの高さは、コンテンツ、フォントサイズとパディングセットによって異なりますので、私はmain.にpaddingを追加する必要がありますメディアクエリでは、スニペットのように固定値のpaddingを使用することはできません。 javascriptを使わずにheaderの高さの変化を尊重するソリューションはありますか？

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header { 
 
    background-color: grey; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
main { 
 
    padding-top: 80px; /* bad, because it's fixed */ 
 
}

<header> 
 
    <h1>Example</h1> 
 
</header> 
 
<main> 
 
    <p>Content</p> 
 
</main>

Answer 1

他の人は言っているように、あなたはjavascriptなしではできませんが、フレックスボックスとflex-grow: 1; overflow-y: scroll;をメインコンテンツエリアに使用して固定ヘッダーを偽装できます。 '日' を使用して

* {margin:0;} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-height: 100vh; 
 
} 
 
section { 
 
    flex-grow: 1; 
 
    overflow-y: scroll; 
 
} 
 
main { 
 
    background: #eee; 
 
    min-height: 500vh; 
 
}

<header> 
 
    <h1>Example</h1> 
 
</header> 
 
<section> 
 
    <main> 
 
    <p>Content</p> 
 
    </main> 
 
</section> 
 
<footer> 
 
    <p>footer</p> 
 
</footer>

Answer 2

あなたが固定位置を維持したい場合はJavascriptを使用せずに、それを達成することができます方法はありません。私は、HTMLの階層を尊重するだけで、位置を使用しないことをお勧めします。スクロールしてビューポートから取り出すと、固定されます。高さが変わる可能性がある場合は、ヘッダーを常に表示したい場合は、これは最も典型的な方法です。