gpt4 book ai didi

html - 如何设置溢出 :hidden for the HTML but set scroll for the tables?

转载 作者:太空宇宙 更新时间:2023-11-04 11:28:47 25 4
gpt4 key购买 nike

我创建了两个相互平行的表,我将两个表设置为在它们溢出时滚动,并且我为 HTML 设置了 overflow:hidden,但是它不起作用,我无法获取表格在溢出时滚动,我之前已经将表格设置为滚动但是它也没有用,我做错了什么?感谢您的帮助。

提前致谢。

        html,
body {
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.mainFrame {
position: absolute;
overflow: hidden;
margin: 2px 4px 4px 2px;
min-width: calc(100% - 7px);
min-height: calc(100% - 7px);
border: 1px solid red;
display: flex;
}
.frame1 {
width: calc(50% - 6px);
margin: 108px 3px 3px 3px;
min-height: 100%;
background-color: green;
float: left;
border-radius: 3px;
overflow: scroll;
}
.frame2 {
width: calc(50% - 6px);
margin: 108px 3px 3px 3px;
min-height: 100%;
background-color: green;
float: right;
border-radius: 3px;
overflow: scroll;
}
<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>doubleFrame.html</title>
</head>

<body>

<div class="mainFrame">


<div class="frame1">
<table>
<tr>
<td>
<input type="radio" value="" />
</td>
<td class="cod"></td>
<td class="des"></td>
</tr>
</table>
</div>

<div class="frame2">
<table>
<thead>
<tr>
<td>aaa</td>
<td>aaa</td>
</tr>
</thead>
<tbody>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
<tr>
<td class="codit">as</td>
<td class="desit">as</td>
</tr>
</tbody>
</table>
</div>

</div>

</body>

</html>

最佳答案

您不能通过仅设置 min-height 来限制框架的高度。您可能需要 height(将其设置为固定高度)或 max-height。这与设置为 scrollauto(后者仅在必要时显示滚动条)的 overflow 相结合应该可以按预期工作。

关于html - 如何设置溢出 :hidden for the HTML but set scroll for the tables?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32182188/

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