I am in the process of designing a web page layout with three sections - left, top right, and bottom right. The left and bottom right sections should have scrollbars, and the entire page should fill the screen. I am utilizing Bootstrap 4 for this project.
While I have successfully implemented the scrollbars for the left region, I am facing an issue with the right regions - the horizontal scrollbar only appears on the bottom-right section as intended, but the vertical scrollbar appears on the entire page. It is important to note that the bottom-right section does have a vertical scrollbar, but it seems to be disabled.
#outer {
height: 100vh;
overflow: none;
}
#left-col {
height: 100vh;
overflow: scroll;
background-color: #ff85d4;
}
#left-large {
height: 5000px;
width: 5000px;
}
#right-col {
height: 100vh;
}
#right-top {
background-color: #abff64;
}
#right-bottom {
overflow: scroll;
background-color: #ccddff;
}
#right-bottom-inner {
width: 2000px;
height: 2000px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" id="outer">
<div class="col-9" id="left-col">
<div id="left-large">
Large left
</div>
</div>
<div class="col-3" id="right-col">
<div id="right-top">
<p>
Top 1
</p>
<p>
Top 2
</p>
<p>
Top 3
</p>
</div>
<div id="right-bottom">
<div id="right-bottom-inner">
Right bottom inner
</div>
</div>
</div>
</div>
</div>Is there a way to enable the bottom-right region to have its own scrollbars?