如何避免右侧的滚动条与顶部导航栏（引导程序）重叠？

Question

我有一个网站，导航栏固定在顶部，导航栏固定在左侧。当需要在网站上滚动时，右侧的滚动条与顶部导航栏重叠。我希望导航栏从顶部导航栏下方开始。我用一个问题的例子做了一个小提琴

https://jsfiddle.net/jsmnsLm7/ （请将窗口调大，以便您可以看到我的导航栏设置的所有功能）

这是我在小提琴中也有的代码（但 stackoverlow 迫使我也将代码放在这里……我认为它在小提琴中更容易）

 <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。但是，当我这样做时，左侧导航栏会固定在页面的最左侧。我希望左侧导航栏灵活并与顶部导航栏同步（如小提琴示例所示）感谢您的帮助，最好的卡尔

原文由 carl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，您需要通过设置 overflow:hidden; 告诉 主体 不要使用滚动条。然后您需要移动 .main 向下一点 50px 因为这是标题高度并告诉它滚动 overflow-y: scroll; 但是 .main 需要设置一个高度，为此你需要一些 Jquery 代码来计算窗口上可用的高度减去标题高度的 50px。

演示

https://jsfiddle.net/ksroccd8/

CSS

 body {
overflow:hidden;
}
.main {
  margin-top: 50px;
  overflow-y: scroll;
}

代码

//get window height minus 50 pixels for the headers height
var height = $(window).height() - 50;

$(".main").height(height);

当您调整窗口大小时，您需要重新计算 .main 的高度，为此您需要添加窗口调整大小功能

代码

window.onresize = function(event) {
var height = $(window).height() - 50;

$(".main").height(height);
};

演示

https://jsfiddle.net/a88n0aet/

原文由 Tasos 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

@Tasos 隐藏正文溢出的解决方案是一个好的开始，但是使用 javascript 设置高度在浏览器调整大小事件上不起作用，至少在 Chrome 59 上是这样（ 现在不推荐使用 document.height ）。

If you use position:absolute , top and bottom on main , you should be set: 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>

原文由 mrm 发布，翻译遵循 CC BY-SA 3.0 许可协议