首页 > 3个垂直table的问题

3个垂直table的问题

问题是这样的:
3个table垂直分布,即上table、中table、下table。
上table高度固定,下table高度也固定,中table随着浏览器大小的变化,高度自适应。
我把3个table都设置为position:absolute,但在关键的中table的height属性却不知道怎么设置,设置成100%的话,就会出现中table的top属性有效,bottom属性无效。
求赐教。


把三个table用div包起来

        table{ width: 100%; height: 100%; position: absolute; }
        table tr td{ border: 1px solid #ddd;}
        .table1{ width: 100%; position: absolute; height: 100px; top: 0;}
        .table2{ width: 100%; position: absolute; top: 100px; bottom: 100px;}
        .table3{ width: 100%; position: absolute; height: 100px; bottom: 0;}
<div class="table1">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
<div class="table2">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
<div class="table3">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
【热门文章】
【热门文章】