引导。在固定导航栏下启用垂直浏览器滚动条。 (不重叠)

时间:2015-03-12 18:26:58

标签: html css twitter-bootstrap scrollbar navbar

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

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

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

提前多多感谢。 问候。

1 个答案:

答案 0 :(得分:2)

为了做到这一点,您需要在页面顶部将标题设置为固定元素,并使用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>
相关问题