4

请通过这个小提琴来看看我到目前为止所做的尝试。

<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 开始。

对此非常感谢任何帮助。

4

5 回答 5

7

在innerdiv 类的样式中，更改min-height:100%为height:100%. 这就是你所需要的！

（这是因为min-height不能继承）

这是jsfiddle

于 2013-07-09T09:42:44.450 回答
3

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

html, body , .outer, .inner {
    height:100%;
    width:100%;
    margin:0;
}
于 2013-07-09T09:41:52.850 回答
1

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

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

这会将桌子扩大到全高！

于 2013-07-09T09:40:34.603 回答
1 
*{
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>

这是一个小提琴！

于 2013-07-09T10:14:22.423 回答
-3

tr制作30%高度的jQuery解决方案

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

var tr_h = t_h/100*30

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

jsfiddle

于 2013-07-09T09:41:03.090 回答