带 TABLE 的 CSS 垂直布局答案

【问题标题】：CSS Vertical Layout with TABLE带 TABLE 的 CSS 垂直布局
【发布时间】：2009-10-27 17:55:18
【问题描述】：

很抱歉，如果这个问题已经得到解答，但是搜索“100% 高度”的东西有点困难。

我的问题是我需要 100% 高度的表格布局，因为浏览器会自动调整单元格大小，出于明显的原因我不想自己编写脚本。

它不同于其他“100% 问题”，因为我需要一些单元格贴在顶部和一些底部，并通过浏览器调整中间大小以填充剩余空间。

这种工作，当我需要中间部分包含溢出的东西时，问题就发生了，显然我想要溢出：自动让用户通过这些东西。它在 WebKit 中工作；在 Firefox 中，它没有；其他未测试。这是测试用例。

<html>
<head>
    <style>

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        table {
            height: 100%;
            width: 200px;
            border: 0;
        }

        .fill {
            background-color: red;
        }

        .cont {
            overflow: auto;
            height: 100%;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td style="height:50px"></td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
        <tr>
            <td class="fill">
                <div class="cont">
                    An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
                </div>
            </td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
    </table>
</body>

【问题讨论】：

你说“它没有”...请完成句子。
“在 Firefox 中，它不是”它的逗号拼接。它不适用于 Firefox，但适用于基于 WebKit 的浏览器
这听起来像是标准的页眉-正文-页脚布局，与人们仅使用 CSS 制定的许多此类布局没有什么不同。（搜索“sticky footer”可以获得比你动摇的更多的例子。）你为什么认为你需要一张桌子？
不，这不是页眉/页脚问题，这里的重点是让浏览器缩放中间单元格以填充剩余空间，并在那里有溢出的内容。如果您在 WebKit 中测试该示例，您会看到它应该如何工作。
这是页眉/页脚问题 - 可以使用“内部”滚动条使页面中间滚动 - 即不是页面滚动条

标签： html css layout

【解决方案1】：

试试这个吧！

我用

测试过

Internet Explorer 7 和 8 (Windows)
火狐 3.5 （Mac 和 Windows）
Safari 4.0 (Mac & 窗户）

也许您想更改宽度并将最小高度增加到像素值。

Demo Source

<html>
<head>
    <style>

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        table {
            height: 100%;
            width: 200px;
            border: 0;
        }

        .fill {
            background-color: red;
        }

        .cont {
            position:relative;
            max-height:100%;
            min-height:100%;
            height: 100%;
        }

        .cont2 {
            position:absolute;
            height: 100%;
            overflow:auto;
        }

    </style>

</head>
<body>
    <table>
        <tr style="height:50px">
            <td style="height:50px">50px</td>
        </tr>
        <tr style="height:50px">
            <td style="height:100px">100px</td>
        </tr>
        <tr>
            <td class="fill">
                 <div class="cont">
                    <div class="cont2">
                    An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
                    </div>
                 </div>
            </td>
        </tr>
        <tr style="height:50px">
            <td style="height:100px">100px</td>
        </tr>
    </table>
</body>

【讨论】：

太棒了，非常感谢！现在，您似乎也可以回答，如何在顶部/底部使用可变高度单元格来完成它？换句话说，我不知道他们的身高，但我可以测量他们，这很棘手，我想避免这种情况
将高度设置为 1px height: 1px;。这可能会奏效。只需使用高度和最小高度即可。
听起来不错，应该可以，只是用 Strict doctype 测试，它似乎不再工作了:(
如果能提供帮助，我可以再次设置新问题和赏金 :)