Having trouble stretching a scrolling div to 100% of its parent container's height? The Hide/Show content feature is causing whitespace at the bottom of the div.
Check out the jsfiddle here: http://jsfiddle.net/fkvftff2/1/
LATEST UPDATE: The issue arises when resizing the window and clicking the hide button, leaving white space at the bottom of the div.
The culprit seems to be the toggle button. Although display block and display hidden hide the white div content, it still affects the div by creating a white space at the bottom.
If you scroll down, my goal is to expand the green scrolling div to fill the entire height of the parent container, regardless of stretching, or hiding/showing content.
Here's the relevant html code:
<!--Center-->
<div class="center">
<!--Feed Content-->
<div id="feed-content">
<div id="networkfeed" class="feedpagetab activefeed">
<input type="checkbox" id="filterbutton" role="button">
<label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span>
</label>
<br />
<br />
<div class="borderline"></div>
<section class="filtercontent"></section><!--Filtercontent ends here-->
<div id="contentSection">
<div id="content">Lorem ipsum dolor sit amet...ex omnis vocibus scriptorem.</div><!--End Content-->
</div><!--End Content Section-->
</div> <!--End Network feed-->
</div><!--End Feed Content-->
</div><!--End Center-->
Below are the pertinent css styles:
.center {
overflow:hidden;
min-height:100%;
float:none;
background-color:#FFF;
color:#999;
position:relative;
}
#contentSection {
overflow-y:scroll;
position:relative;
display:inline-block;
background-color:green;
}
/*----- Show me Button-----*/
... (more CSS styles) ...
The javascript below is used for resizing the scrolling div:
... (javascript code for resizing) ...
As demonstrated in the fiddle, when you vertically adjust the div and toggle the content visibility, a whitespace appears at the bottom of the scrolling area. My objective is to eliminate all whitespace within the scrolling div region so that it occupies 100% of the available height without any gaps.
Your assistance is greatly appreciated!