讓div佔據整個單元格高度

如何讓表格單元格中的div佔據單元格的整個高度？讓div佔據整個單元格高度

設置div高度= 100％將不起作用，除非表格單元具有固定的高度，但我不能這樣做，因爲單元格必須具有取決於可變內容的液體高度。

我想讓每一行中的所有div都是行的相同全高。

的代碼如下，見活生生的例子在 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>

一些更多的研究和實驗，我想出了什麼可能是使用CSS的唯一解決方案之後。我太新來回答我自己的問題了，所以我在這裏發佈。

它基本上由以下組成：

穿戴位置：相對於上表細胞
穿戴位置：絕對;頂部：0;左：0;右：0;底部：0;在
Put含量直接在單元格中包含的div，沿着格，不在它，迫使細胞攝取的內容高度

見演示在 http://jsfiddle.net/ehLVM/

來源

2011-04-20 Stephen

只是想知道，你爲什麼不能移動邊界的CSS到TD，而不是.box的？這樣可以很容易地使所有的盒子看起來都一樣大小。 – Rasika 2011-04-20 23:04:40

根據你的用例，我可以想辦法做到這一點，不使用'表格（或JavaScript）。我應該發佈嗎？這有點複雜。 – thirtydot 2011-04-20 23:18:48

@ thirtydot，是的，請做。我正在尋找任何可能的答案，我可以得到... – Stephen 2011-04-20 23:46:57

做了一些谷歌搜索，並在發現this thread論壇。這似乎不可能通過CSS來完成。但是這有一個JavaScript解決方案。正如我在上面的評論中所建議的那樣，爲什麼不把邊界CSS移動到td？

來源

2011-04-20 23:08:29 Rasika

感謝您的回覆。以避免使用JS我不能把邊框放在單元格上，因爲div實際上是一個複雜的構造，它使用圖形切片呈現一個8片3D邊框 – Stephen 2011-04-20 23:13:28

根據我的鏈接中的帖子，不可能做到這一點由於瀏覽器不一致，完全通過css。 – Rasika 2011-04-20 23:25:42

試試這個：

table { height: 100%; } 

td 
{ 
    padding:0px; 
    vertical-align:top; 
    height:100%; 
} 

.box 
{ 
    margin:0px; 
    border:solid 2px red; 
    height:100%; 
}

Working Sample（上FF4測試）

來源

2011-04-23 04:49:06

感謝Ronak，這是令人鼓舞的，它在FF和Chrome中運行良好，但不是IE瀏覽器，任何想法爲什麼？ – Stephen 2011-04-27 03:07:17

您可以使用此？它使所有的div都與它相同的高度。

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/

來源

2011-04-30 19:44:26 ethicka

讓div佔據整個單元格高度

回答

相關問題