Question

考虑这个简单的HTML代码：

<div class="part">
    <div class="part-header">
        A fixed-height for header
    </div>
    <div class="part-body">
        The number of inner divs depends on the foreach result.
        I want this to fill the remaining space
        <!-- ko: foreach... -->

    </div>
</div>

以上代码将用作part组件到几个地方。

我希望它重塑其父级的不同身高。

使用这样的CSS会有所帮助：

.part-body {
    height: 100%;
}

但由于part-header的存在，它覆盖了父母。

我想要一些像Windows窗体表布局面板，行AutoSize, Percent, AutoSize。

问题：如何设置此组件的方式是使用CSS 3.0自动将其高度重新调整为parent.Height-header.Height？

Answer 1

您可以像这样使用display: table和table-row：

.part {
    display: table;
    height: 100%;
    width: 100%;
}

.part-header {
    display: table-row;
    height: 30px;
}

.part-body {
    display: table-row;
    height: 100%;    
}

这是demo jsfiddle。和another jsfiddle滚动。并且another jsfiddle在Firefox上滚动。

Answer 2

试试这个..

.part {height: 100%;}

.part-header {height: auto;}

.part-body {height: auto;   }

如何在html中创建类似可调整大小的div的TableLayoutPanel

2 个答案: