After scouring through countless posts, I still can't seem to figure out what's missing in my code. Here is the issue I am facing:
The div on my page stretches vertically perfectly upon loading. But as soon as there is more data that requires scrolling, the div no longer expands and stops at 100% of the original window size. Is there something I'm overlooking to make it stretch 100% vertically regardless of the amount of data inside? I apologize if this is a common issue with an existing solution, but I couldn't find anything!
CSS:
html, body {
height: 100%;
background:#333;
margin:0;
}
.container_fullscreen {
position: absolute;
width: 80%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background:#ccc;
margin: 0 auto;
}
.BRC_main_wrapper {
height:100%;
top: 0px;
bottom: 0px;
padding: 0px;
width:100%;
margin: 0 auto;
}
.BRC_main_sidenav {
width:120px;
height:100%;
top:0px;
bottom:0px;
float:left;
}
.BRC_grid_4columns {
min-width:275px;
width:100%;
max-width:357px;
float:left;
}
.BRC_grid_activegutter {
margin:8px;
}
HTML:
<body>
<div class="container_fullscreen">
<div class="BRC_main_wrapper">
<div class="BRC_main_sidenav"></div>
<!--- grid --->
BLA BLA BLA<br>
BLA BLA BLA<br>
BLA BLA BLA<br>
<!--- end grid --->
</div>
</div>
</body>