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

首先，您需要通过设置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/

Answer 2

@Tasos'隐藏身体溢出的解决方案是一个良好的开端，但使用javascript设置高度不适用于浏览器调整大小事件，至少在Chrome 59上（并且document.height为now deprecated）

如果您在position:absolute上使用top，bottom和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 3

我建议@ Tasos＆＃39;溶液

$(document).ready(function() {
    $(window).resize(function() {
        resize();
    }); 
    function resize() {
        var myheight = $(window).outerHeight(true) - 50;
        $('.main').outerHeight(myheight);
    }
    resize();
});

Answer 4

更改 main 容器的最佳方法是使用以下简单的js代码：

$(document).ready(function(){
    $('.main').height($(window).height() - 110);
    $(window).on("resize", function(){
        $('.main').height($(window).height() - 110);
    });
});

，css代码应如下所示：

.main {
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 55px;
    margin-bottom: -55px;
}

或者只是：

.main {
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 110px;
}

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

4 个答案: