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

【问题标题】：Scrolling Cell in a 100% height TABLE在 100% 高度表中滚动单元格
【发布时间】：2017-01-14 23:34:57
【问题描述】：

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

【问题讨论】：

我认为您需要重新表述您的问题。现在听起来好像你在说，“我想实现 X，所以我必须使用 Y .. 我怎样才能让 Y 工作？”我认为您应该问“我想实现 X .. 实现我的目标的最佳方式是什么”。
多年后，这仍然没有解决:(

标签： html css layout html-table

【解决方案1】：

我今天刚刚回答了这样一个问题，我相信您正在寻找同样的东西，here 就是问题本身和我的答案：

HTML

<div class="container">
    <div class="twenty">
        fixed height 20
    </div>
    <div class="fifty">
        fixed height 50
    </div>
    <div class="hundred">
        fixed height 100
    </div>
    <div class="auto">
        <div class="content">
            ....
        </div>
    </div>
    <div class="fifty" style="border-bottom:none; border-top:1px solid">
        fixed height 50
    </div>
</div>

CSS

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

.container {
    width:100%;
    height:100%;
}

.twenty, .fifty, .hundred, .auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin:-120px 0;
    padding:120px 0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

完整视图：http://jsfiddle.net/8abeU/show/ 小提琴：http://jsfiddle.net/8abeU

【讨论】：

工作，不幸的是我的应用程序停留在 90 年代（Quirks 模式 IE8），因此它的行为不符合预期。

【解决方案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>

Refer to this guide 如何做到这一点（我所做的只是编辑容器和主体 div 的背景颜色以创建中间内容跨越 100% 高度的错觉。调整 css 宽度等...以适应你的布局）。

【讨论】：