Keeping a table fixed to the bottom of the viewable page but scroll within that table?

So I have created a site to load content dynamically with javascript. I have a table that I would like to be "stapled" at the bottom of the page as I scroll the main page. But I also need this table to scroll as well, as content will exceed the browser's viewable area both horizontally and vertically.

I have tried this CSS to make it work:

#comparison_table {
  overflow: scroll;
  position: absolute;
  bottom: 0%;
  width: 99%;  /* Not 100% so as to not prompt the body-wide scroll bars */ 
  height: 15%;
  background-color: yellow;
}

"Absolute" works great for position, until I need the main body of my page to scroll down. Then the table moves up and off the page.

"Fixed" works great as it stays right there at the bottom of the browser viewing area. However, a problem arises where the table can not be scrolled vertically. (Haven't managed to test it horizontally yet.)

So if I have enough content to exceed the 15% height in #comparison_table, I can't scroll to anything that's been cut off using position:fixed. Using position:absolute, then my table doesn't stay at the bottom of the page as I scroll.

What I'm looking for ultimately is the best of both worlds: Fixed and Absolute combined in some way. I haven't found a trick to doing that.