Geek Answers Handbook

How to make a div match the height of the containing td?

I have three “panels” laid out along a series of tables. One is taller than the other two, and I want all three panels to match the height of the tallest. I tried styling divs with a height of: 100%, but short panels remain short even when the tds content grows.

My HTML is generated by JSF, so I have limited control over its form, but I can change the styles. I made a simplified version of the generated code below. The same problem occurs in IE8 and Firefox. However, IE8 displays short panels vertically aligned at the top of td, while Firefox does them in the middle.

<html> <head> <title>Test Table</title> <style TYPE="text/css"> td {border: 1px solid red; padding: 1px;} .panel {border: 1px solid blue; padding: 1px;height:100%} .panel-header{background-color: green; color: white;} .panel-body {border: 1px solid green; padding: 1px; height:100%;} </style> </head> <body> <h1>Test Table</h1> <table width="100%"> <tbody> <tr> <td> <div class="panel" style="height:200px;"> <div class="panel-header"> Header One </div> <div class="panel-body"> Body One </div> </div> </td> <td> <div class="panel" style="height:100%;"> <div class="panel-header"> Header Two </div> <div class="panel-body"> Body Two </div> </div> </td> <td> <div class="panel"> <div class="panel-header"> Header Three </div> <div class="panel-body"> Body Three </div> </div> </td> </tr> </tbody> </table> </body> <html>
+6
source share
3 answers

I do not think you can set the height to 100% without explicitly specifying the height for tds (or table). It seems that you should specify an explicit height for the parent element before height:100% takes effect. Perhaps you can change your styles for the td tags themselves instead of div containers?

If this helps align the divs at the top instead of the middle, I made an example here on how to do this (add vertical-align:top; to the td tags). I made an example using only divs, although I know that you said you have limited control over its form.

If you know the maximum height of one element, setting the table or table to that height (i.e. height:200px; ) should make 100% put into action in the div.

Edit If you don't mind using jQuery, I updated my example here to do what you required.

+5
source 
 height=100%; or height=inherit;

One of them should do the trick :)

0
source

My solution: http://jsfiddle.net/k6Dam/2/

Remove the inline styles (I hope you can do this) and set the minimum panel height to 200 pixels.

0
source

More articles:


All Articles