滚动单元格在100%高度表中

Question

滚动单元格在100%高度表中

如果这已经得到了回答,我很抱歉,但是搜索"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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Cho*_*hoy -2

我不确定我是否理解为什么需要使用表格。如果您的目标只是创建一个布局，当中间的内容较小时，该布局始终跨越浏览器窗口的整个高度，并在内容增加时垂直调整，那么 CSS 就是您所需要的。

<html>

<head>
<style>

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   height:100%; /* Necessary for IE 
   position:relative;
   background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
   background-color: red; /* Set equal to background-color of #container */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

</style>
</head>

<body>

<div id ="container">
    <div id="header"></div>
    <div id="body">
    This is resizable.
    </div>
    <div id="footer"></div>
</div>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

请参阅本指南了解如何操作（我所做的只是编辑容器和主体 div 的背景颜色，以创建中间内容跨越 100% 高度的错觉。调整 css 宽度等...以适合您的布局）。

归档时间：	15 年，12 月前
查看次数：	6569 次
最近记录：	8 年，9 月前