Removing white space from below the footer pushed out by hidden elements - html

Question

I have a three column design where the right most column contains a large number of 'Divs' that encapsulate collapsed info that can be scrolled through with the centre mouse wheel overflow being hidden. The the three columns are set to 760px with a footer below that. It all sits nicely and looks good BUT the page continues down to about 4000px (my guess is the size of the hidden elements).
What I have tried:
body, page wrap, column, in column wrapper all set max-height, made no difference.
added a red border to all page elements (idea from a stack overflow post) nothing visible down there to push it out.
some tentative testing with vh vw numbers but no luck.
Here is a snippet of the top of the column but the are 36 more divs below this:
<aside id="option_sidebar" class="content_rounds">
<h2>Scientists:</h2>
<div class="inner">
<div class="option op1">
<img src="../images/Science/Michael_Archer.jpg" alt=""><h3>Michael Archer</h3>
<div class="collapse_wrap">
<p>Australian Scientists - Fossils</p>
Resource link 1
Resource link 2
Resource link 3
Resource link 4
Resource link 5
Resource link 6
Resource link 7
</div>
</div>
These are the styles that are being directly applied to the column:
#option_sidebar {
width: 260px;
padding: 5px 15px;
float: left;
background-color:#fff;
overflow:hidden;
height:760px;
}
.content_rounds{
border-radius: 10px 10px 5px 5px;
box-shadow: 3px 3px 1px #8b8b7a;
border: solid 1px #8b8b7a;
}/*don't think this matters*/
#option_sidebar .inner{
overflow: auto;
max-height:700px;
margin:0px -50px 20px 0px;
padding-right:35px;
}
.option{
border: solid 1px #8b8b7a;
width:94%;
padding: 5px 10px;
margin:5px 10px 5px 0px;
background-color:#fff;
overflow:hidden;
}
.option img{
display: inline;
max-width:70px;
max-height:100px;
width:auto;
height:auto;
margin:5px;
}
.option h3, .option h4, .option h5{
display:inline;
margin-left:10px;
margin-right:auto;
margin-top:5px;
margin-bottom:5px;
position:relative;
}
.option a{
display:block;
}
.op1:hover > .collapse_wrap {
-webkit-transition: .5s;
transition: .5s;
visibility: visible;
position:relative;
opacity: 1 ;
}
.op1 h3{
padding-top:10px;
}
I hope that there is enough detail to assist but not so much as to bore,
Thanks in advance for your assistance.

Answer 1

Thanks for providing a full example in your comments!
You can resolve your problem by adding position: relative; to either the .op1 div, the .inner div, or the #option_sidebar.
From the Mozilla Developer Network:
[The relative] keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
More: https://developer.mozilla.org/en-US/docs/Web/CSS/position