如果这个问题已经得到解答,我很抱歉,但是搜索“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 https://stackoverflow.com/a/8821519/680398是问题本身和我的答案:
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/show/小提琴:http://jsfiddle.net/8abeU http://jsfiddle.net/8abeU
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)