If you take a look at this fiddle I created, you can see what I've attempted. My goal is to have a webpage without scroll bars but with the col-left and col-right divs getting a scrollbar when they overflow.
Could someone provide some insight on what I might be missing? Alternatively, if there's a more efficient solution using Bootstrap, please feel free to share it with me.
I'll include the HTML code here as well for future reference when the fiddle expires.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8">
<:title>title</title>
</head>
<body>
<div class="container-fluid" id="my-container">
<div class="row" id="my-full-row">
<div class="" id="my-menu-col">
M
</div>
<div class="col">
<div class="row" id="my-title-row">
Title row
</div>
<div class="row" id="my-row">
<div class="col-sm-2" id="my-col-left">
col left<br/>col left<br/>... (content continues)
</div>
<div class="col-sm-10" id="my-col-right">
col right<br/>col right<br/>... (content continues)
</div>
</div>
</div>
</div>
</div>
And here is the CSS:
html, body {
height: 100%;
margin: 0;
}
.row {
margin: 0px;
}
.col {
padding: 0px;
}
#my-container {
height: 100%;
padding: 0px;
}
#my-full-row {
height: 100%;
}
#my-menu-col {
height: 100%;
width: 50px;
background-color: purple;
}
#my-title-row {
background-color: red;
height: 50px;
}
#my-row {
background-color: blue;
height: 100%;
}
#my-col-left {
background-color: green;
overflow-y: scroll;
}
#my-col-right {
background-color: yellow;
overflow-y: scroll;
}
#u { background-color: #337ab7; }