我有一个网站，导航栏固定在顶部，导航栏位于左侧。当网站需要滚动时，右侧的滚动条与顶部导航栏重叠。我希望导航栏从顶部导航栏下方开始。
我摆弄了一个问题的例子
https://jsfiddle.net/jsmnsLm7/ https://jsfiddle.net/jsmnsLm7/（请将窗口调大，以便您可以看到我的导航栏设置的所有功能）
这是我在小提琴中也有的代码（但是 stackoverflow 迫使我也将代码放在这里......我认为在小提琴中更容易）
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation" style="width: 180px; position: fixed;">
<br><br><br>
<ul class="nav nav-sidebar">
<li class="active"><a href="#">item0</a></li>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</div>
<!--/span-->
<div class="col-sm-9 col-md-10 main" style="margin-left: 180px;">
</div>
</div>
</div>
我之前在stackoverflow上看到有人讨论过这个问题，他们建议在容器的css中添加position:fixed。但是，当我这样做时，左侧导航栏会固定在页面的最左侧。我希望左侧导航栏灵活且与顶部导航栏同步（如小提琴示例所示）
谢谢你的帮助
最好的
卡尔
@Tasos' 隐藏正文溢出的解决方案是一个好的开始，但是使用 javascript 设置高度在浏览器调整大小事件上不起作用，至少在 Chrome 59 上（并且 document.height 是现已弃用 https://developer.mozilla.org/en-US/docs/Web/API/Document/height).
如果你使用position:absolute, top and bottom on main，你应该设置：https://jsfiddle.net/vvsp60ya/ https://jsfiddle.net/vvsp60ya/
body {
overflow: hidden;
margin: 0;
padding: 0;
}
nav {
background-color: black;
height: 50px;
color: white;
}
h1 {
padding: .5em;
margin: 0;
}
main {
position: absolute;
top: 50px;
bottom: 0;
overflow-y: scroll;
}
<nav>
<h1>Title</h1>
</nav>
<main>
<div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</main>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
