I've set up a bootply template where I have panels in a column on the right side. My goal is to make these panels scroll within the column without affecting the header or footer. However, for some reason, the 'overflow-y: scroll' property doesn't seem to be working!
Take a look at my code:
html,body,.container {
height:calc(100% - 17px);
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 0px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.col-md-3 {
background: pink;
}
.col-md-9 {
background: yellow;
}
.row .no-float {
display: table-cell;
float: none;
}
header, footer {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid lightgrey;
background: white;
}
footer {
border-top: 1px solid lightgrey;
position: absolute;
bottom: 0;
width: 100%;
}<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
&...
</footer>
</div>
</div>
</div>