how to avoid that the scroll bar on the right overlaps with the top navbar (bootstrap)?

Question

I have a website with a navbar fixed to the top and a navbar on the left. When there is need for scrolling on the website, the scrollbar on the right overlaps with the top navbar. I would like the navbar to start below the top navbar. I made a fiddle with an example of the problem

https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)

Here is the code which I also have in the fiddle (but stackoverlow forces me to put code in here as well... I think its much easier in the fiddle)

<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>

I saw that some discussed this problem before on stackoverflow, and they suggested to add position: fixed to the css of the container. However, when I do that, the left navbar gets fixed to the very left of the page. I want the left navbar to be flexible and synchronous with the top navbar (as shown in the fiddle example) thanks for any help best carl

Answer 1

@Tasos' solution to hide body overflow is a good start, but using javascript to set the height doesn't work on browser resize events properly, at least on Chrome 59 (and document.height is now deprecated).

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>

Answer 2

First you need to tell the body not to use the scroll bars by setting overflow:hidden; .Then you need to move .main down a bit 50px as this is the headers height and tell it to scroll overflow-y: scroll; .However .main needs a height to be set and for that you need some Jquery code to calculate how much height is available on the window minus the 50px for the headers height.

Demo

https://jsfiddle.net/ksroccd8/

Css

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

Code

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

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

When you resize the window you need to recalculate the height for .main and for that you will need window resize function to add

Code

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

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

Demo

https://jsfiddle.net/a88n0aet/