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:
- Put position:relative on table cells
- Put position:absolute; top:0; left:0; right:0; bottom:0; on contained divs
- 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/
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
