2

画面の上部に固定ヘッダーがあり、ヘッダーの後に要素を配置しようとすると、その要素はヘッダーの高さを無視してしまいます。

HTML

<header></header>
<p>Empty text</p>

CSS

header {
    display: block;
    height: 100px;
    width: 100%;
    background: #eee;
    position: fixed;
    top: 0;
    z-index: 100;
}

JSFIDDLE

これに似た問題の解決策をStackOverflowやその他の場所で検索しましたが、役に立ちませんでした（特定の問題を言語化するのに苦労したことが一因です）。クリアフィックスを試してみた

<header></header>
<div style="clear:both"></div>
<p>Empty text</p>

しかし、それでもうまくいきません。margin-top: 100pxまた、要素に aを追加しようとしましたpが、将来ヘッダーの高さを変更し、ヘッダーに続くすべての要素または追加する可能性のある他の要素に対してこれを行う必要がある場合の悪い習慣を考えますposition: fixedまたはposition: absolute。_ さらに、ヘッダーは、さまざまなサイズの画面に応じて流動的な高さになります。

現在、私はワイヤーフレームを作成しているので、可能であれば JavaScript を使用せず、単純な CSS のみを使用したいと考えています。そうでない場合は、最小限のバニラ JavaScript で十分です。これは Web デザインの根本的な問題であり、私は常にこれに反論してきましたが、これmargin-topに対抗するためのよりクリーンでより良い方法を誰かが知っているかどうか疑問に思っています。

また、これは少なくともある程度クロスブラウザである必要があります。繰り返しますが、ワイヤーフレームのみです。私のワイヤーフレームは、基本的な CSS をサポートするあらゆるもので機能するはずです。

これが重複した質問である場合は申し訳ありませんが、そうであると確信していますが、私の状況に完全に一致するものは見つかりませんでした. どんな助けでも大歓迎です！

4

4 に答える 4

4

http://jsfiddle.net/09qL0nzv/3/

var p = document.getElementsByTagName("p")[0],
    header = document.getElementsByTagName("header")[0],
    h = window.getComputedStyle(header).getPropertyValue("height");

p.style.marginTop=h;

これにより、固定ヘッダーの高さに等しい段落にマージントップが設定されます。ただし、これはパディングやボーダーを考慮していません。これには 2 つの解決策があります。

box-sizing: border-boxヘッダーに使用します。これにより、パディングと境界線を含む高さがスタイルシートで定義された高さになります。(次のように、すべての要素で border-box を使用することを強くお勧めします*, *:before, *:after {-moz-box-sizing:border-box;box-sizing: border-box;}。)

もう 1 つの解決策は、JavaScript で計算された値にパディングと境界線を追加し、その値を に設定したマージン上部に含めることですp。私はこの解決策が好きではありませんが、うまくいきます。

于 2014-08-28T17:56:01.610 に答える
1

position:fixedここで問題を引き起こすのは です。ヘッダーはフロー コンテンツの一部ではなくなったため、フロー コンテンツはページの上部から始まります。

これには理想的な解決策はありませんが、余白を変更するよりも少し良いオプションは、コンテンツの先頭に の高さに一致する<p>空を追加することです。<div><header>

JSFiddleの例を次に示します。

于 2014-08-28T17:32:36.933 に答える
0

より動的なソリューションについては、これが私が思いついたものです

$('p').css('margin-top', $('header').outerHeight());
$(window).resize(function() {
  $('p').css('margin-top', $('header').outerHeight());
});

これを行うためのより良い方法があるかもしれませんが、私の推論は、ヘッダー全体の外側の高さに p タグの初期マージンを設定し、ヘッダーが変更されるたびに (この場合、ウィンドウがサイズが変更された場合)、マージンは p タグで再評価されます。

于 2016-02-05T19:16:30.350 に答える