html - 模拟怪癖模式表格呈现

Question

我们的应用程序大量使用表格来进行布局和定位，过去仅使用 IE(怪癖模式)。展望 future ，我们正在尝试摆脱怪癖模式，并用 div 和更具语义的布局替换表格。

阻止我们的是一个怪癖模式“功能”，它允许我们在表格行上设置 height=100%，并让该行占据剩余的垂直空间。到目前为止，无论是否使用表格，我们都无法找到在怪癖模式之外执行此操作的方法。

这是我们在页面正文中使用的代码。这里没有显示样式，但效果还是一样的:

<table width="100%" height="100%" border="0">
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <th>This is my header bar</th>
                </tr>
            </table>
        </td>
    </tr>
    <tr height="100%">
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my main section bar</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my footer bar</th>
                </tr>
            </table>
        </td>
    </tr>

这是怪癖模式下的样子。请注意，中间一行(height="100%")已展开以占据剩余的垂直空间:

标准模式呈现相同的代码如下:

jsFiddle 代码:http://jsfiddle.net/RBeWN/3/ (请注意，由于 iFrame 等原因，代码实际上不会在 jsFiddle 上以怪癖模式呈现，但您可以使用开发工具强制执行它)。

我试图用 div 和一些 css 来做到这一点，但它不起作用:http://jsfiddle.net/BVMhR/3/ .将主 div 设置为 height: 100%; 使其具有与其父元素相同的高度，而不是让它占据剩余空间。设置 box-sizing: border-box; 对此也没有影响。

有人可以帮我找到解决这个问题的方法吗？如果可能的话，我希望能够在没有 javascript 的情况下完成它，但是如果需要 Javascript ，它必须是一个可以在每个页面上运行的通用解决方案，这样就没有了设置它的开发开销太大。

Answer 1

在试用了很多不同的布局并明确了一些有关要求的细节之后，我找到了一种使用纯 CSS 来完成此操作的方法。

它确实涉及知道顶行和底行的高度(尽管它们可以用 % 指定)，并且还涉及一些额外的 div 层。

我的例子可以找到in this jsFiddle .请注意，当扩展/缩小窗口时，中间行会适本地重新调整大小。如果有必要，也可以将它做成一个滚动的 div(使用 overflow: auto)，这样当内容太长时会滚动。

如有需要，如有关于此布局的任何其他问题，请随时与我联系。