让div占据整个单元格的高度 | 让div占据整个单元格的高度

本文介绍了让div占据整个单元格的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何让表格单元格内的div占据单元格的完整高度？

设置div height = 100％不会工作，除非表格单元格具有固定高度，但我不能这样做，因为单元格必须有一个液体

我想让每一行的所有div都是同一行的完整高度。

代码如下，参见
的实例：

 <！DOCTYPE html PUBLIC  -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://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 =1width =50％> 
< tr> 
< td width =50％> 
< div class =box> 
这个框有很多文本。这个框有很多文字。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。这个框有很多文本。 
< / div> 
< / td>< td width =50％> 
< div class =box> 
此框有一些文本。 
< / div> 
< / td> 
< / tr> 
< / table> 
 
< / body> 
< / html> 
  
 
 
 
 
 
 经过一些更多的研究和实验后，什么可能是使用CSS的唯一解决方案。 
 
 
 它基本上由以下组成：
 
 放置位置：相对于表格单元格
 
 放置位置：absolute; top：0; left：0; right：0; bottom：0; 
 
  
 
将内容直接放置在单元格内，与div一起，而不在div内，以强制单元格占用内容的高度
 
 
查看
的演示 
 
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 athttp://jsfiddle.net/ehLVM/
 解决方案 
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/
                        这篇关于让div占据整个单元格的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！