CODEWITHSUNDEEP
htmlcss
gooseman
gooseman

Reputation: 475

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/

Upvotes: 1

Views: 3015

Answers (2)

Brontes
Brontes

Reputation: 164

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.

Upvotes: 1

Joe B.
Joe B.

Reputation: 1174

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%">

Upvotes: 6

Related Questions