CSS未知高度的固定標題

我有一個標題固定在頁面頂部，可以在頁面調整爲較小寬度時創建更多高度。CSS未知高度的固定標題

如何使頁面內容（#wrapper）始終從僅包含CSS的標題底部開始？

<body> 
<header> 
    This fixed content will wrap on small devices. 
</header> 
<div id="wrapper"> 
    This content should always begin immediately below the header. 
</div> 
<body>

來源

2014-10-02 Asa Carter

您可以在'@media'查詢分辨率的標題中刪除'position：fixed'並將其更改爲'position：relative' – 2014-10-02 15:12:43

您不能讓位置：fixed元素與其他人進行交互頁。它不再是頁面的一部分了....要麼使它不固定，要麼給它一個固定的高度...... – LcSalazar 2014-10-02 15:16:46

@VitorinoFernandes這是一個好主意，但標題也需要在小屏幕上保持固定。 – 2014-10-02 15:17:27

...正如上面評論中所述，除非您能夠知道固定標題的高度在哪種分辨率下增加，您可以使用媒體查詢並使用填充 - 頂部的#wrapper元素等於固定標題的高度，或使用高度等於標題的空元素。

來源

2014-10-02 15:39:55 scooterlord

由於只想使用CSS，你可以只設置padding-top您#wrapper DIV所以它使得接頭的底部下方的內容。然後調整媒體查詢中每個屏幕大小的padding-top大小。

來源

2014-10-02 15:16:59

是否爲你工作？ – 2014-10-02 15:21:02

我認爲JS解決方案看起來是唯一的方法。根據標題的高度設置包裝的頂部填充。儘管如此，我真的只是在尋找一種CSS。 – 2014-10-02 15:27:51

當你到達一個移動視圖並在你的#wrapper上設置一個margin-top時，我會建議你爲這個頭部起一個固定的高度。移動設備上只有有限的空間，如果將其浪費在標題上，將會是一種恥辱。您應該確保移動設備上重要的內容不會因爲不太重要的元素而受到影響。 – 2014-10-02 15:31:25

CSS未知高度的固定標題

回答

相關問題