Menu
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:
See demo at http://jsfiddle.net/ehLVM/
506
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/
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
