html - 如何在html中制作一个像可调整大小的div一样的TableLayoutPanel

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组件到几个地方。

我希望它根据其父级的不同高度大小进行 reshape 。

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

.part-body {
    height: 100%;
}

但由于 part-header 的存在，它覆盖了父级.

我想要类似 Windows 窗体表格布局面板的东西，其中包含行 AutoSize, Percent, AutoSize .

问题:如何设置此组件，使其主体高度重新调整为 parent.Height-header.Height自动使用 CSS 3.0？

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 上滚动。