div无法使用固定标头正确定位自身

Question

I have a header with position:fixed . Within this header there is a div which is of a variable height, with min-height: 60px

Now, there is a div called container below the header div which has the following css:

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

Now this works fine as long as the header is 60px, but when the header height increases, the top of the container gets hidden by the header. How do I go about fixing this so that if the height of the header changes dynamically to say 90px, the container div will just move below, according to this new height?

Html is as follows:

<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

What you are experiencing is normal behavior since the header has fixed positioning. The only way to achieve what you want, if the header content changes, is to change the padding of the #container dynamically, with javascript.

Here's an example: http://codepen.io/seraphzz/pen/milpv

You get the height of the header and set it as top padding for the #container div.