Question

我正在尝试实现一个适用于所有类型的浏览器和移动浏览器的固定标题栏。

在下面的代码中，是否可以避免内容的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>

Answer 1

使用该div的类 padding-top: 100px 否则没有。

Answer 2

由于标题元素已从文档流中取出（position:fixed;），因此您需要某些内容来推送标题下方的内容。但是你可以使用比像素更灵活的单位：

padding-top: 1.5em;

查看此JSFiddle。

由于ems是相对于父级字体大小的，因此这里的填充将向上或向下缩放不同的字体大小。或者您可以使用%指定填充。

Answer 3

我将使用jQuery做到这一点：

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

感谢您的回复。

如何实现固定的标题工具栏

3 个答案: