Question

如果已经回答这个问题我很抱歉，但是搜索“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>

Answer 1

试试这个有效！

我使用

测试了它

Internet Explorer 7＆amp; 8（Windows）
FireFox 3.5 （Mac＆amp; Windows）
Safari 4.0（Mac＆amp; 视窗）

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

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>

带有TABLE的CSS垂直布局

1 个答案: