3

我们的应用程序大量使用表格进行布局和定位，并且过去仅是 IE（怪癖模式）。展望未来，我们正试图摆脱怪癖模式，并用 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>

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

怪癖模式渲染

标准模式呈现相同的代码，如下所示：

标准模式

jsFiddle 与代码： http: //jsfiddle.net/RBeWN/3/（请注意，由于 iFrames 等，代码实际上不会在 jsFiddle 上以怪异模式呈现，但您可以使用开发工具强制它）。

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

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

4

4 回答 4

2

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

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

我的例子可以在这个 jsFiddle中找到。请注意，在扩展/缩小窗口时，中间行会适当地重新调整大小。如有必要，也可以将其设置为滚动 div（使用overflow: auto），以便内容过长时滚动。

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

于 2012-08-24T12:48:39.477 回答
2

我认为这不能用纯 CSS 来解决。

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

这就是我使用 javascript 的方式...我根据您的 div 名称假设这是您的页面处理页眉、内容、页脚的方式，因此这应该足够通用。

我添加了边框/边距以显示那里存在边缘情况，jQuery 可以很好地帮助...我还假设您的 quirks-mode 示例中的内容垂直居中不是问题的一部分。

编辑：

我站得更正了。它可以用 CSS 来完成，虽然它会产生一个很难修复的宽度问题，所以这里是解决方法：

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

于 2012-08-23T21:14:57.970 回答
1

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

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

于 2012-08-23T20:05:27.660 回答
0

您需要将正文和 HTML 扩展为 100% 才能正常工作。"height:100%" 使项目成为其父项的 100%。如果没有定义父级的大小，它只会与其子级一样大。

body, html {height:100%}
于 2012-08-23T19:54:45.527 回答