Div 100％高度

相關問題是this one，但它並不真正有幫助，因爲我無法明確設置任何東西的高度，它全部具有可變的用戶定義內容，可以是一行高或5行高。Div 100％高度

位停留在這一個，給定一個表（內聯CSS僅用於演示）：

<table border=1> 
    <tr> 
     <td valign="top"> 
      <table> 
       <tr> 
        <td style="background:red"> 
         Something here<br /> 
         More 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <div style="border:1px solid green">This needs to be 100% remaining height</div> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td style="background:blue"> 
      Blah<br /> 
      Blah<br /> 
      Blah<br /> 
      Blah<br /> 
      Blah<br /> 
      Variable<br /> 
      Number<br /> 
      Of lines! 
     </td> 
    </tr> 
</table>

我需要在div擴展到它包含分區的100％的高度，所以它總匹配blah blah blah列的高度（爲了實現此目的，我假設父級td首先需要擴展以填充剩餘高度）。

我有一個的jsfiddle這裏：

http://jsfiddle.net/WZC35/1/

顯示我的意思更加清晰。

我可以使用Jquery，但寧願有一個CSS解決方案。 我知道使用表格是值得懷疑的但這是一個Jquery插件呈現相當複雜的佈局中的數據和表提供了最好的支持解決方案，並解決了很多對齊問題，如果你想看到它的上下文，看到此鏈接：

http://69.24.73.172/demos/eventml/default.htm

我試圖讓大紫紫箱匹配右邊欄的高度。

來源

2011-05-12 Tom Gullen

表內的表？我的意思是我討厭使用表格，但是桌子內的桌子？嗯，它只是不是很友善，並且比它應該更慢 – Val 2011-05-12 10:29:03

我想你不能使用rowspan而不是嵌套表？ – PJP 2011-05-12 10:30:54

http://jsfiddle.net/WZC35/11/ ....基本上你必須指定父母身高，讓孩子擁有100％的身高。否則它不知道什麼高度可以遵循100％的什麼？ – Val 2011-05-12 10:32:41

之後看看你的鏈接，我認爲你可以使用完美的rowspan而不是嵌套表（如說PJP）。然後，您可以將所需的CSS裝飾（紫色背景）關聯到td，而不是div。如果需要的話，div只能包含文本。

<table border=1> 
    <tr> 
     <td valign="top" style="background:red"> 
         Something here<br /> 
         More 
     </td> 
     <td style="background:blue" rowspan="2"> 
      Blah<br /> 
      Blah<br /> 
      Blah<br /> 
      Blah<br /> 
      Blah 
     </td> 
    </tr> 
    <tr> 
     <td style="border:1px solid green"> 
      <div >This needs to be 100% height</div> 
     </td> 
    </tr> 
</table>

來源

2011-05-12 10:39:20 davidgnin

感謝您的答案，但它並沒有真正的幫助，因爲包含的div需要樣式（例如它有圓角，只有80％的寬度，請參閱我發佈的最後一個鏈接。）因此div必須是其容器的100％高度。 – 2011-05-12 10:56:36

http://webfx.eae.net/dhtml/cssexpr/cssexpr.html這是你最後的選擇哈哈... – Val 2011-05-12 12:12:00

我不能說我喜歡這個標記的任何東西。嵌套表很醜，內聯樣式也有問題，但這似乎接近你想要的？

<!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> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Something here More</title> 
</head> 

<body> 

<table border="1"> 
<tr> 
    <td valign="top" style="height: 100%"> 
    <table style="height:100%"> 
     <tr> 
      <td style="background: red;">Something here<br /> 
      More </td> 
     </tr> 
     <tr style="height:100%"> 
      <td style="height:100%"> 
      <div style="border: 1px solid green; height:100%"> 
       This needs to be 100% remaining height</div> 
      </td> 
     </tr> 
    </table> 
    </td> 
    <td style="background: blue">Blah<br /> 
    Blah<br /> 
    Blah<br /> 
    Blah<br /> 
    Blah<br /> 
    Variable<br /> 
    Number<br /> 
    Of lines! </td> 
</tr> 
</table> 

</body>

來源

2011-05-12 13:26:14

如果您可以通過編程方式創建表格，則可以設置保存嵌套表格的TD，以便在上表中留下列數的colspan。 – 2011-05-12 13:31:55

感謝您的代碼，但它似乎仍然產生相同的結果：http://jsfiddle.net/w56c7/，你是正確的，表是編程生成的，所以cols/rows的數目是已知的。 – 2011-05-12 13:42:43

Div 100％高度​​

回答

相關問題

Div 100％高度