gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:38:44 24 4
gpt4 key购买 nike

很抱歉,如果已经回答了这个问题,但搜索“100% 高度”的内容有点困难。

我的问题是,由于浏览器自动调整单元格大小,我需要 100% 高度的表格布局,出于显而易见的原因,我不想自己编写脚本。

它不同于其他“100% 问题”,因为我需要一些单元格粘在顶部和底部,并通过浏览器调整中间的大小以填充剩余空间。

那种工作,当我需要中间部分包含溢出的东西时,问题就发生了,显然我想要 overflow:auto 以允许用户通过那些东西。它在 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%;
}

全 View :http://jsfiddle.net/8abeU/show/ fiddle :http://jsfiddle.net/8abeU

关于html - 在 100% 高度的表格中滚动单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1587927/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com