CSS位置：固定標頭

Question

我有一個帶有position:fixed的固定標頭position:fixed為什么它保留在其他元素之上並隱藏它們的原因，因此我必須在main.添加padding main. 由於header的高度隨內容，媒體查詢設置的字體大小和填充而變化，因此無法像代碼片段中那樣使用固定的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的方法是無法實現的。 我建議不要使用位置，而要尊重html層次結構。 一旦滾動將其移出視口，並使其“固定”。 如果您希望高度可以變化，則始終使標題可見，這是最典型的方法。

Answer 2

正如其他人所說，沒有javascript就無法做到，但是您可以使用flexbox和flex-grow: 1; overflow-y: scroll;偽造固定的標頭flex-grow: 1; overflow-y: scroll; 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>