Getting div to occupy full cell height

2019-01-28 02:46发布

站内问答 / HTML/CSS
1332 3 3

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/

标签： css xhtml
举报
3条回答
萌系小妹纸
2楼-- · 2019-01-28 03:28

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?

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
3楼-- · 2019-01-28 03:31

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/

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
4楼-- · 2019-01-28 03:52

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)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)