0

我有一个带有position:fixed. 在此标头中有一个高度可变的 div,其中min-height: 60px

现在,在标题 div 下方有一个名为 container 的 div,它具有以下 css:

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

现在只要标题为 60 像素,它就可以正常工作,但是当标题高度增加时,容器的顶部会被标题隐藏。我该如何解决这个问题,以便如果标题的高度动态变化为 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>
4

1 回答 1

0

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

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

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

于 2013-06-01T00:52:35.873 回答