6

次の状況：

<body>
 <div style="position:fixed; width:100%">[place holder for header]</div>
 <div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>

ヘッダーは常に表示され、上部にある必要があるため、これはposition：fixedである必要があります。ヘッダーの高さを自己調整した後に問題が発生します。ヘッダーが100pxより大きい場合、コンテンツの一部が非表示になります。

ヘッダーの終わりに関してコンテンツdivの開始位置を動的に設定するにはどうすればよいですか（CSS）。

4

2 に答える 2

8

私はまだCSSのみのソリューションを探していますが、今のところ、jQueryを使用するときにJavaScriptを1行だけ使用するというアイデアがあります。

JavaScript

$(document).ready(function () {
    $('#content').css('marginTop', $('#header').outerHeight(true) );
});

HTML

<body>
    <div id="header" style="[…]">[place holder for header]</div>
    <div id="content" style="[…]">[content]</div>
</body>

を使用する利点は.outerHeight(true)、ヘッダーに適用した可能性のある境界線とマージンを処理できることです。

于 2012-07-02T22:27:25.907 に答える
6

CSSのみの解決策（スーパークリーンではありませんが）は、同じブロックを2回表示することです。1番目のブロックは「位置：固定」、2番目のブロックは「可視性：非表示」です。両方の高さが同じであるため、2番目のブロックの役割は、ページのコンテンツを適切なレベルにプッシュダウンすることです。

于 2014-01-17T21:55:13.170 に答える