This layout includes a header, footer, sidebar, and a scrolling main content section. You can view a demonstration of this design on Bootply.
<div class="parent">
<div>HEADER</div>
<div class="main">
<div class="side">
SIDE
</div>
<div class="inner-main">
MAIN
<ul>
<li>testing 1.. 2.. 3..</li>
<li>testing 1.. 2.. 3..</li>
<!-- and so on... -->
</ul>
</div>
</div>
<div>FOOTER</div>
</div>
The CSS for this layout is as follows:
body {
height: 100vh;
width: 100%;
display: flex;
}
div.main {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
div.parent {
display: flex;
flex-direction: column;
background-color: green;
flex: 1 1 auto;
}
div.side {
background-color: #454545;
}
.inner-main {
background-color: pink;
flex: 1 1 auto;
overflow-y: scroll;
}
In Chrome, the scrolling feature works correctly without an outer scrollbar. However, in other browsers, such as Firefox and Internet Explorer 11, an outer scrollbar may appear and affect the display of the footer.
If you want to correct this issue and ensure that the inner scroller handles the overflow properly in Firefox and optionally IE11, consider making adjustments to the CSS.