html - div 不会用固定的标题正确定位自己

Question

我有一个带有 position:fixed 的 header 。在这个 header 中有一个可变高度的 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

您遇到的是正常行为，因为 header 具有固定位置。如果 header 内容发生变化，实现您想要的唯一方法是使用 javascript 动态更改#container 的填充。

这是一个例子:http://codepen.io/seraphzz/pen/milpv

您获取标题的高度并将其设置为#container div 的顶部填充。