Let's make it simple, keep it all wrapped up, no absolute positioning. The advanced search button option is pushed down by the searches above it. The heights are percentage based and min-height
prevents the container from getting too small.
CSS / HTML / Demo
html,
body {
height: 100%;
margin: 0;
}
#search-wrap {
width: 300px;
height: 50%;
min-height: 200px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: #CCC;
border-bottom: solid 1px #000;
padding: 10px;
}
#search-simple {
overflow-y: scroll;
height: 80%;
}
#search-advanced a {
display: block;
background: #F00;
padding: 10px;
color: #FFF;
}
<div id="search-wrap">
<div id="search-simple">
<ul>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
</ul>
</div>
<div id="search-advanced">
<a href="#">Advanced Search</a>
</div>
</div>
Have a fiddle as well - Fiddle link!