0

のヘッダーがあり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>
4

1 に答える 1

0

ヘッダーの位置が固定されているため、発生しているのは通常の動作です。ヘッダーのコンテンツが変更された場合に目的を達成する唯一の方法は、JavaScript を使用して #container のパディングを動的に変更することです。

例を次に示します: http://codepen.io/seraphzz/pen/milpv

ヘッダーの高さを取得し、#container div の上部パディングとして設定します。

于 2013-06-01T00:52:35.873 に答える