如何避免右侧的滚动条与顶部导航栏(bootstrap)重叠？

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.但是,当我这样做时,左侧导航栏固定在页面的最左侧.我希望左导航栏能够灵活并与顶部导航栏同步(如小提琴示例所示),感谢任何帮助最好的卡尔

Answer 1

@Tasos 隐藏正文溢出的解决方案是一个好的开始，但是使用 javascript 设置高度在浏览器调整大小事件上无法正常工作，至少在 Chrome 59 上（并且 document.height 现已弃用）。

如果您使用position:absolute,top和bottomon main，您应该设置：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>

Answer 2

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

演示

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/