让div占据整个单元格的高度 [英] Getting div to occupy full cell height
问题描述
如何让表格单元格内的div占据单元格的完整高度？
设置div height = 100％不会工作，除非表格单元格具有固定高度，但我不能这样做，因为单元格必须有一个液体
我想让每一行的所有div都是同一行的完整高度。
代码如下，参见
的实例： http://www.songtricks.com/CellDivBug.html
<！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内，以强制单元格占用内容的高度
查看
的演示 http://jsfiddle.net/ehLVM/解决方案你能用吗？
function equalHeight（group）{
var tallest = 0;
group.each（function（）{
var thisHeight = $（this）.height（）;
if（thisHeight> tallest）{
tallest = thisHeight;
}
}）;
group.height（tallest）;
}
资料来源： http://www.cssnewbie.com/equal-height-columns-with-jquery/
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/
解决方案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占据整个单元格的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
