Html Div 元素内的表格高度 100%

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13877302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:23:05  来源:igfitidea点击:

Table Height 100% inside Div element

htmlcss

提问by Sowmya

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>

回答by Sowmya

Not possible without assigning height value to div.

不为 div 分配高度值是不可能的。

Add this

添加这个

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

DEMO

演示

回答by Ladineko

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

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

回答by Cdeez

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-

CSS-

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

See the 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);
});

回答by Lisa van Ginneken

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 中进行了测试!

回答by Leon Rom

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

要将桌子的高度设置为其容器,我必须这样做:

1) set "position: absolute"

1)设置“位置:绝对”

2) remove redundant contents of cells (!)

2)删除单元格的多余内容(!)