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％高度