0

すべての種類のブラウザとモバイルブラウザで機能する固定ヘッダーバーを実装しようとしています。

以下のコードでは、コンテンツstyle="padding-top:100px"のdiv要素の属性を回避することが可能ですか。100px距離を手動で計算したくありません。

<html>

<body>
    <div id="xheader" style="position:fixed; width:100%; top:0; left:0; right:0; z-index:1000; border:solid 1px red">
        <p>FIXED BAR</p>
    </div>

    <div id="xcontainer">
        <p>Line1</p>
        <p>Line2</p>
        <p>Line3</p>
        <p>Line4</p>
        <p>Line5</p>
        <p>Line6</p>
        <p>Line7</p>
        <p>Line8</p>
        <p>Line9</p>
        <p>Line10</p>
        <p>Line11</p>
        <p>Line12</p>

        <p>Line1</p>
        <p>Line2</p>
        <p>Line3</p>
        <p>Line4</p>
        <p>Line5</p>
        <p>Line6</p>
        <p>Line7</p>
        <p>Line8</p>
        <p>Line9</p>
        <p>Line10</p>
        <p>Line11</p>
        <p>Line12</p>

        <p>Line1</p>
        <p>Line2</p>
        <p>Line3</p>
        <p>Line4</p>
        <p>Line5</p>
        <p>Line6</p>
        <p>Line7</p>
        <p>Line8</p>
        <p>Line9</p>
        <p>Line10</p>
        <p>Line11</p>
        <p>Line12</p>

    </div>

</body> 

</html>
4

3 に答える 3

1

それ以外の場合は、その div にクラスを使用し padding-top: 100px ます。

于 2012-10-31T16:55:58.727 に答える
0

ヘッダー要素は (によって) ドキュメントのフローから取り出されるため、コンテンツをヘッダーの下にプッシュする何かposition:fixed;が必要です。ただし、ピクセルよりも柔軟な単位を使用できます。

padding-top: 1.5em;

このJSFiddleをチェックしてください。

em は親のフォント サイズに相対的であるため、ここのパディングは別のフォント サイズに拡大または縮小します。%または、パディングを指定するために使用することもできます。

于 2012-10-31T21:07:28.320 に答える
0

私はjQueryでそれを行うつもりです：

var xheaderHeight = $('div#xheader').height();
$('div#xcontainer').css('padding-top',xheaderHeight);

ご回答ありがとうございます。

于 2012-11-01T17:04:35.643 に答える