html - Bootstrap 。使垂直浏览器滚动条在固定导航栏下开始。 (不重叠)

标签 html css twitter-bootstrap scrollbar navbar

我正在使用 Bootstrap 提供的固定导航栏的示例代码。有什么相对简单的方法可以使浏览器滚动条不与固定导航栏重叠。

示例如下: http://i.stack.imgur.com/wCEVt.png

这是我想要得到的: http://i.stack.imgur.com/GY0km.png

非常感谢。 问候。

最佳答案

为此,您需要将标题设为页面顶部的固定元素,并使用 position: fixed 容器来包装页面上的其余内容.这是一个例子:

CSS:

html, body {
    width: 100%;
    height: 100%;
}

#header {
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
}

#container {
    width: 100%;
    position: fixed;
    top: 50px;
    bottom: 0;
    overflow: auto;
}

HTML:

<body>
    <div id="header">
        <ul><!-- other header elements --></ul>
    </div>
    <div id="container">
        <!-- All of the content of your site -->
    </div>
</body>

关于html - Bootstrap 。使垂直浏览器滚动条在固定导航栏下开始。 (不重叠),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29017536/

相关文章:

javascript - 将鼠标悬停在图像上,图像下方的图像不透明度和标题颜色发生变化......当标题变成两行时,它会破坏格式

css - 如何在 div 多行内制作文本?

html - Bootstrap 网格居中不起作用

html - 为什么页脚文本不会扩展到与底部文本相同的长度?

HTML CSS 按钮文本对齐不起作用

html - 复选框背景颜色和样式

html - 减少 Bootstrap 中两行导航栏之间的空间

javascript - 使用 codeigniter 和 AJAX 检查数据库 SQL 中是否存在电子邮件

html - Bootstrap : Dropdown on top of accordion

html - 在不改变背景样式的情况下更改超大屏幕中的文本