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

标签 html css

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

在下面的代码中,是否可以避免在内容的 div 元素中使用 style="padding-top:100px" 属性。我不想手动计算距离的 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>

最佳答案

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

关于html - 如何实现固定的标题工具栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13162925/

相关文章:

javascript - appendChild 不在正确的位置

javascript - 在 jQuery 弹出式 div 中显示图像

css - 在没有媒体查询的情况下,可以使用 css grid 和 flexbox 实现响应式页面布局吗?

html - 我如何使用 1 个 <span> 标记来加粗多个单词?例如在下面的文字中

html - 如何将 django forms.py 选择项转换为 html 列表?

javascript - 获取父节点样式

html - 如何强制使用 CSS 显示 : table to fit within a minimum height? 制作的表格

html - 两个表格垂直,一个表格作为另一个表格的标题,并且列和宽度不对齐

javascript - 如何将图像放入 div 圈?

html - 如何使文本与图标保持内联?