6

How do I get divs within table cells to occupy the full height of the cell?

Setting div height=100% won't work unless the table cell has a fixed height on it, but I can't do this because the cells must have a liquid height depending on variable content.

I am trying to get all divs in each row to be the same full height of the row.

The code is below, see live example at http://www.songtricks.com/CellDivBug.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

td
{
    padding:0px;
    vertical-align:top;
    height:auto;
}

.box
{
    margin:0px;
    border:solid 2px red;
    height:100%;
}

</style>


</head>

<body>

    <table border="1" width="50%">
    <tr>
        <td width="50%">
            <div class="box">
            This box has a lot of text.   This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  
            </div>
        </td><td width="50%">
            <div class="box">
            This box has a little text.
            </div>
        </td>           
    </tr>
    </table>

</body>
</html>

After some more research and experimentation I came up with what may be the only solution using CSS. I'm too new to answer my own question, so I'm posting it here.

It basically consists of:

  1. Put position:relative on table cells
  2. Put position:absolute; top:0; left:0; right:0; bottom:0; on contained divs
  3. Put content directly within cell, alongside div, not within it, to force cells to take height of content

See demo at http://jsfiddle.net/ehLVM/

Stephen
  • 133
  • 2
  • 9
  • Just wondering, why can't you move the border css to the td instead of .box? that would make it easy to make all boxes look the same size. – Rasika Apr 20 '11 at 23:04
  • Depending on your use case, I can think of a way to do this that doesn't use `table`s (or JavaScript). Should I post it? It's a little convoluted. – thirtydot Apr 20 '11 at 23:18
  • @thirtydot, yes please do. I'm looking for any possible answers that I can get... – Stephen Apr 20 '11 at 23:46
  • You should try your jsFiddle in Safari 5 or Firefox 3.6 :( – thirtydot Apr 21 '11 at 01:47

3 Answers3

2

Could you use this? It makes all of the divs with this attached to it the same height.

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

Source: http://www.cssnewbie.com/equal-height-columns-with-jquery/

ethicka
  • 134
  • 1
  • 2
  • 8
0

Did some Googling and found this thread in a forum. It seems to be impossible to do it via CSS. But this has a JavaScript solution. As suggested in my comment above, why not move the border CSS to the td?

Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
Rasika
  • 1,980
  • 13
  • 19
  • Thanks for the reply. Hoping to avoid using JS. I can't put the border on the cells because the div is actually a complex construction that renders an 8-piece 3D border using graphic slices. – Stephen Apr 20 '11 at 23:13
  • According to the post in my link, it is impossible to do this entirely via css due to browser inconsistency. – Rasika Apr 20 '11 at 23:25
0

Try this:

table { height: 100%; }

td
{
    padding:0px;
    vertical-align:top;
    height:100%;
}

.box
{
    margin:0px;
    border:solid 2px red;
    height:100%;
}

Working Sample (tested on FF4)

Ketan Modi
  • 1,780
  • 1
  • 16
  • 28
  • Thanks Ronak, that's encouraging. It works well in FF and Chrome but not IE. Any ideas why? I'll keep experimentng... – Stephen Apr 27 '11 at 03:07