how to avoid that the scroll bar on the right overlaps with the top navbar (bootstrap)?
@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>