Question

请通过this fiddle查看我到目前为止所尝试的内容。

<div class="outer">
    <div class="inner">
        <table style="background-color: red; width:100%; height:100%;">
            <tr style="background-color: red; width:100%; min-height:30%;">
                <td>Name</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>
            <tr style="background-color: blue; width:100%; min-height:30%;">
                <td>Nirman</td>
            </tr>    
        </table>
    </div>
</div>

我需要显示占用div的全高度的这个表，并且该表的行应该在高度上相等以占据整个表的空间。这意味着，桌子的高度应该是div高度的100％。并且每行的高度应该是div高度的30％。

知道怎么做到这一点？此外，我想要一个适用于大多数浏览器的解决方案，至少从IE 8开始。

对此的任何帮助都非常感激。

Answer 1

在inner div类的样式中，将min-height:100%更改为height:100%。这就是你所需要的一切！

（这是因为min-height无法继承）

这是jsfiddle

Answer 2

通过CSS，您必须设置.inner的高度。 min-height值不能继承： http://codepen.io/anon/pen/yuEkA 捷径将是：

html, body , .outer, .inner {
    height:100%;
    width:100%;
    margin:0;
}

Answer 3

您可以绝对定位表格。例如，给它类“全高”，然后添加以下css：

table.full-height {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

这会将桌子扩展到全高！

Answer 4

*{
margin:0;
padding:0;
border:0;
}
table{
height:100%;
position:absolute;
}


<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td bgcolor="#FF0000">&nbsp;</td>
  </tr>
  <tr>
   <td bgcolor="#00FF00">&nbsp;</td>
  </tr>
  <tr>
   <td bgcolor="#0000FF">&nbsp;</td>
  </tr>
</table>

这是a fiddle！

Answer 5

用于制作30％tr高度

的jQuery解决方案

var t_h = $('.inner').height()

var tr_h = t_h/100*30

$('tr').height(tr_h)
$('table').height(t_h);

jsfiddle

HTML表格，高度为100％，行数高度相等。如何使它成为可能？

5 个答案: