How to set 100% height of div inside table cell

I'm trying to get a div inside a table cell to fill the entire height of the table cell. The div is a "wrapper" div (bookWrapper) with 3 other divs inside. I need the footer div (bookNavLinks) inside the wrapper div to stick to the bottom. I tried setting the height to 100% and position relative. bookNavLinks position is set to absolute and bottom 0;

<div id="bookWrapper" style="height:100%; border:1px solid #000; position:relative;">

<div id="bookNavLinks" style="padding: 20px 20px 0px 20px; position:absolute; bottom:0">

https://jsfiddle.net/5zg4h95o/3/