表格高度在Div元素内100％

Hi I want to set table height 100% to its parent div without define height in div. My code is not working. I dont know what I am missing. Fiddle link

嗨我想将表格高度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>

5 个解决方案

#1

Not possible without assigning height value to div.

如果没有为div分配高度值，则无法实现。

Add this

加上这个

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

DEMO

DEMO

#2

This is how you can do it-

这就是你如何做到的 -

HTML-

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;
}

See the DEMO

见DEMO

Update: Well, if you are not looking for applying 100% height to your parent containers, then here is a jQuery solution that should help you-

更新：好吧，如果你不想在你的父容器上应用100％的高度，那么这里有一个jQuery解决方案可以帮助你 -

Demo-using jQuery

演示使用jQuery

Script-

脚本-

 $(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);
});

#3

You need to have a height in the div <div style="overflow:hidden"> else it doesnt know what 100% is.

你需要在div中有一个高度

否则它不知道100％是什么。

#4

Had a similar problem. My solution was to give the inner table a fixed height of 1px and set the height of the td in the inner table to 100%. Against all odds, it works fine, tested in IE, Chrome and FF!

有类似的问题。我的解决方案是给内表一个1px的固定高度，并将内表中td的高度设置为100％。不顾一切，它运行良好，在IE，Chrome和FF测试！

#5

to set height of table to its container I must do:

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

1) set "position: absolute"

1）设置“position：absolute”

2) remove redundant contents of cells (!)

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

#1