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

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 に答える
-3

30% のtr高さを作るための 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 に答える