Question

我们的应用程序大量使用表格进行布局和定位，并且过去只使用IE（quirks-mode）。继续前进，我们试图摆脱怪癖模式，并用div和更多语义布局替换表。

阻止我们的一件事是怪癖模式“功能”，它允许我们在表格行上设置height=100%，并让行占用剩余的垂直空间。到目前为止，我们无法在quirks模式之外找到一种方法，无论有没有表格。

这是我们在页面正文中使用的代码。这里没有显示样式，但效果仍然相同：

<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>

这就是Quirks模式下的样子。请注意，中间行（height="100%"）已展开以占用剩余的垂直空间：

Quirks mode rendering

标准模式呈现相同的代码：

Standards modes

js使用代码：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解决。

http://jsfiddle.net/AZcZx/10/

这就是我用javascript做的方式......我有点假设根据你的div的名字，这就是你的页面处理页眉，内容，页脚的方式，所以这应该足够通用了。

我添加了边框/边距以显示有一个边缘情况，jQuery很好地帮助...我还假设在你的怪癖模式示例中垂直居中的内容不是问题的一部分。 / p>

编辑：

我的立场得到了纠正。它可以用CSS来完成，虽然它创建了一个宽度问题，这个问题不是很容易解决，所以这里有修复：

http://jsfiddle.net/AZcZx/27/

Answer 2

在玩了很多不同的布局之后，并澄清了一些有关要求的细节，我找到了一种方法来使用纯CSS。

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

我的例子可以找到in this jsFiddle。请注意，在展开/缩小窗口时，中间行会适当地重新调整大小。如果需要，也可以将此文件转换为滚动div（使用overflow: auto），以便内容在文件太长时滚动。

如果需要，请随时与我联系以解决此布局的任何其他问题。

Answer 3

你知道页眉和页脚的高度吗？用div来看你的小提琴例子，它们都有一个固定的高度。如果是这种情况，您可以将它们绝对放在顶部和底部，并在#divMain的顶部和底部添加边距。

您还需要将html和正文设置为height: 100%;，并将#divMain设置为min-height: 100%;

Answer 4

您需要将正文和HTML扩展为100％才能生效。 “height：100％”使项目成为其父项的100％。如果没有父类的定义大小，它将只与其子级一样大。

body, html {height:100%}

模拟怪癖模式表呈现

4 个答案: