Anyone have an idea for setting a margin on a div outside of the scrollbar when overflow-auto triggers?

Question

So I have a tall column div, with a content div, empty space, and an absolute-to-the-bottom div.

When the browser is resized to a short height, I'd like overflow: auto to trigger on the content div. This works fine, but I'm trying to make it be smart with the absolute bottom div, so the scroll bar is always above the bottom div.

I'm using the Gumby framework for column management and styling so my JSFiddle isn't working well, but I'll post pictures to better get across what my problem is.

I can only post two links and no images at my current reputation, so I'll have to only have two. Pretend I have a picture here of the below images working fine at large heights, stretching to a max height and stopping.

http://i.stack.imgur.com/0nt0o.png Here's a photomanipulation of what I WANT it to do. The content div needs to end at the top of the absolute div floating on the bottom there.

http://i.stack.imgur.com/VL5Eh.png But instead, it activates overflow:auto way late, and nothing I've thought of so far will push it higher against the bottom of its container.

---

Edit: Next time I will take the time rebuild a fiddle. A simpler way of phrasing this question would be: Is there a pure CSS way to have an element take 'position: absolute' elements into account when calculating height? I've done more research since posting this, and it appears there is not. As such, I will just be using javascript to modify the height of the top element as [100% - absolute elements]. Thanks for the answer attempts!

---

Edit #2: For an extra hacky CSS3-only solution, height: calc(100% - 100px); worked.

Answer 1

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!