0

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/

gooseman
  • 425
  • 1
  • 6
  • 16
  • Any particular reasons why you are using a table to achieve your design layout? far from the best way of doing things – Tik Jul 19 '17 at 01:52
  • To add to @Tik's comment, I would strongly encourage moving away from the tables for layout and inline-css approach you have going on, if you have any serious aspirations to pursue front end development – ESR Jul 19 '17 at 02:55
  • I absolutely agree with both these comments. However, we don't know the end use... and if it is for HTML email, table layouts tend to render more consistently across various [email clients](http://kb.mailchimp.com/campaigns/design/limitations-of-html-email). – Joe B. Jul 22 '17 at 19:23

2 Answers2

3

Demo - codepen

Here's another relevant SO answer

It appears you need to add a height to the <table> tag.

<table style="border-collapse: collapse; height:100%">

Joe B.
  • 1,124
  • 7
  • 14
1

Just to add to @Joe B.'s comment.

Instead of height: 100%, I use height: 1px. Because with 100% table stretches when I don't have enough rows in it.

Brontes
  • 134
  • 5