如何避免右側的滾動條與頂部導航欄（引導程序）重疊？

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> 

我看到一些計算器上討論過這個問題，他們建議增加位置：固定在容器的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來設置高度doesn至少在Chrome 59上（和document.height是now deprecated），不能正常處理瀏覽器調整大小事件。

如果使用position:absolute，在maintop和bottom，你應該設置：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>