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

我将使用 jQuery 来做到这一点：

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

感谢您的回复。

于 2012-11-01T17:04:35.643 回答
0

因为标题元素是从文档流中取出的（by position:fixed;），所以您确实需要一些东西来将内容推送到标题下方。但是您可以使用比像素更灵活的单位：

padding-top: 1.5em;

看看这个JSFiddle。

由于 ems 是相对于 parent 的字体大小，所以这里的 padding 会放大或缩小不同的字体大小。或者您可以只使用%指定填充。

于 2012-10-31T21:07:28.320 回答