滚动单元格在100％高度 [英] Scrolling Cell in a 100% height TABLE
问题描述
对不起，如果这已经回答了，但很难搜索100％height的东西。
我的问题是，我需要100％高度表格布局，因为浏览器自动调整单元格大小，我不想为自己的脚本自己显而易见的原因。
它与其他100％问题，因为我需要一些单元格粘在上面，一些在底部，并有中间的大小调整由浏览器填充剩余的空间。
这种工作，当我需要中间部分包含溢出的东西时，问题发生，显然我想溢出：auto那里，以使用户通过那个东西。它在WebKit中工作，在Firefox中，它没有，其他人没有测试。这是测试用例。
< html>
< head>
< style>
body，html {
height：100％;
margin：0;
padding：0;
}
表{
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>
本地JavaScript对象的不透明句柄。无法直接创建JavaScriptObject。 JavaScriptObject应该声明为返回本机（非Java）对象的JSNI方法的返回类型。从Java返回到JSNI中的JavaScriptObject将成为原始对象，并且可以按预期的方式在JavaScript中访问
< / div>
< / td>
< / tr>
< tr>
< td style =height：100px>< / td>
< / tr>
< / table>
< / body>
我今天刚刚回答了这样的问题，我相信你在寻找同样的事情，这里是问题本身和我的回答：
HTML
< div class =container>
< div class =twenty>
固定高度20
< / div>
< div class =fifty>
固定高度50
< / div>
< div class =hundred>
固定高度100
< / div>
< div class =auto>
< div class =content>
....
< / div>
< / div>
< div class =fiftystyle =border-bottom：none; border-top：1px solid>
固定高度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
I'm sorry if this was already answered, but it's kind of difficult to search for something with "100% height".
My problem is that I need 100% height table layout because of automatic cell resizing done by browser, which I don't want to script myself for obvious reasons.
It differs from other "100% problems", in that I need some cells to stick on the top and some on the bottom, and have the middle resized by browser to fill remaining space.
That sort of works, the problem happens when I need that middle part to contain overflowing stuff, and obviously I want overflow:auto there to enable user thru that stuff. It works in WebKit, in Firefox, it doesn't, others not tested. Here's the test case.
<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>
I just answered a question like this today and i believe you're looking for the same thing, here is the question itself and my answer:
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%;
}
Full view: http://jsfiddle.net/8abeU/show/ Fiddle: http://jsfiddle.net/8abeU
这篇关于滚动单元格在100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
