Html 独自创立使垂直浏览器滚动条在固定导航栏下启动。（不重叠）_Html_Css_Twitter Bootstrap_Scrollbar_Navbar

Html 独自创立使垂直浏览器滚动条在固定导航栏下启动。（不重叠）

html css twitter-bootstrap

Html 独自创立使垂直浏览器滚动条在固定导航栏下启动。（不重叠）,html,css,twitter-bootstrap,scrollbar,navbar,Html,Css,Twitter Bootstrap,Scrollbar,Navbar,我正在使用bootstrap提供的固定导航条的示例代码。有没有相对简单的方法使浏览器的滚动条不与固定的导航条重叠下面是示例中的情况：以下是我想要得到的：先谢谢你。注意。要做到这一点，您需要将页眉设置为页面顶部的固定元素，并使用位置：fixed容器包装页面上的其余内容。以下是一个例子： CSS: HTML: 添加相关代码，以便我们了解您的操作。要查看此问题中提到的代码，您可以执行以下操作：转到并在浏览器中使用“查看页面源代码”。谢谢您的回答。我可能做错了什么，但你的建议并没有使我得

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

下面是示例中的情况：

以下是我想要得到的：

先谢谢你。

注意。

要做到这一点，您需要将页眉设置为页面顶部的固定元素，并使用

位置：fixed

容器包装页面上的其余内容。以下是一个例子：

CSS:

HTML:

添加相关代码，以便我们了解您的操作。要查看此问题中提到的代码，您可以执行以下操作：转到并在浏览器中使用“查看页面源代码”。谢谢您的回答。我可能做错了什么，但你的建议并没有使我得到想要的结果。下面是我所做的：我举了一个网页代码示例（请参阅），并将整个。。。里面的部分。。。将页面的其余部分放入。。。。我还将您的css代码添加到bootstrap.css的底部。但是呈现的页面仍然有导航栏和滚动条重叠。您也使用了该页面的CSS吗？因为这会导致我提供的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;
}

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