如果这已经得到了回答,我很抱歉,但是搜索“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>
解决方法
我刚才回答了这样的问题,我相信你正在寻找同样的事情,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
