20

嗨，我想将表格高度 100% 设置为其父 div 而不在 div 中定义高度。我的代码不起作用。我不知道我错过了什么。小提琴链接

<div style="overflow:hidden">
<div style="float:left">a<br />b</div>
<table cellpadding="0" cellspacing="0" height="100%" style="border:solid 1px #000000">
<tr>
<td valign="middle">c</td></tr>
</table>
</div>
4

5 回答 5

38

如果不将高度值分配给 div，则不可能。

添加这个

body, html{height:100%}
div{height:100%}
table{background:green; width:450px}    ​

演示

于 2012-12-14T11:00:36.060 回答
1

您需要在 div 中有一个高度，<div style="overflow:hidden">否则它不知道是什么100%。

于 2012-12-14T10:58:52.787 回答
1

这就是你可以做到的-

HTML-

<div style="overflow:hidden; height:100%">
     <div style="float:left">a<br>b</div>
     <table cellpadding="0" cellspacing="0" style="height:100%;">     
          <tr><td>This is the content of a table that takes 100% height</td></tr>  
      </table>
 </div>

CSS-

html,body
{
    height:100%;
    background-color:grey;
}
table
{
    background-color:yellow;
}

查看演示

更新：好吧，如果您不希望将 100% 高度应用到您的父容器，那么这里有一个 jQuery 解决方案可以帮助您-

演示-使用 jQuery

脚本-

 $(document).ready(function(){
    var b= $(window).height(); //gets the window's height, change the selector if you are looking for height relative to some other element
    $("#tab").css("height",b);
});
于 2012-12-14T11:07:54.743 回答
0

有类似的问题。我的解决方案是给内表一个固定的高度 1px 并将内表中 td 的高度设置为 100%。无论如何，它运行良好，在 IE、Chrome 和 FF 中进行了测试！

于 2014-10-19T17:46:20.540 回答
-4

要将表格的高度设置为其容器，我必须这样做：

1）设置“位置：绝对”

2）删除单元格的冗余内容（！）

于 2017-07-22T06:07:44.137 回答