div無法使用固定標頭正確定位自身

Question

我有一個帶有position:fixed的標題。 此標頭中有一個高度可變的div， min-height: 60px

現在，頭div下方有一個稱為container的div，它具有以下CSS：

width: 1007px;
padding: 60px 0 0 0;
display: block;

現在，只要標頭為60px，它就可以正常工作，但是當標頭高度增加時，標頭會隱藏容器的頂部。 我該如何解決這個問題，以便如果標題的高度動態更改為90px，則容器div將根據此新高度移動到下方？

HTML如下：

<div id="wrapper">
 <header style="width: 100%; display: block; position: fixed; z-index: 1;">
    <div class="b-block" style="min-height:60px;display: block;">blah blah</div>
 </header>
 <div id="container" style="width: 1007px; padding: 60px 0 0 0; display: block;">blah blah</div>
</div>

Answer 1

由於標題具有固定的位置，因此您遇到的是正常現象。 如果標題內容發生更改，唯一實現所需內容的方法是使用javascript動態更改#container的填充。

這是一個示例： http : //codepen.io/seraphzz/pen/milpv

您獲得標頭的高度並將其設置為#container div的頂部填充。