gpt4 book ai didi

html - 在 Firefox 中,溢出滚动条未显示在 100% 高度 div 上

转载 作者:行者123 更新时间:2023-11-28 04:58:22 25 4
gpt4 key购买 nike

我重现了我在 Chrome 和 Firefox 之间遇到的 CSS 兼容性问题。

在固定高度的“容器”DIV 内的表格单元格内具有 100% 高度的“内部”DIV。我希望内部 DIV 填充单元格并向其中动态添加文本,以便在它开始溢出时出现滚动条。

在 JSFiddle 中,您可以在 Chrome 和 Firefox 中看到代码。在 Chrome 中,它的行为符合预期,但在 Firefox 中,滚动条不显示,内部 DIV 一直超出容器 DIV 的高度。

JSFiddle code to try in both Chrome and Firefox

HTML如下:

<style>
#container {
height:80px;
width:100%;
border:1px solid;
overflow:hidden;
resize:vertical;
}

#inner {
height:100%;
width:300px;
border:2px solid red;
overflow-y:auto;
}

table{
height:100%;
}
</style>

<div id="container">
<table>
<tr>
<td>
<div id="inner">
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</td>
<td>
<img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
</td>
</tr>
</table>
</div>

编辑,进一步的要求:我忘了提到我在一个可调整大小的 DIV 中进行了此设置,即容器 DIV 能够调整其高度,以便表格和内部 DIV 相应地调整大小。

最佳答案

这是一个常见的错误。每当元素设置为 height: 100%或任何其他百分比,它与 height 有关它的 parent 。所以在使用它时,定义一个 height 很重要对于元素的父级:

演示问题:向父级添加一个类 <td class="fix">并添加一些 css 解决问题:

.fix {
height: 80px;
display: block;
}

WORKING JSFIDDLE DEMO

请记住,设置 display table-cell 中表格单元格的属性至 block是你应该避免的事情,因为你正在改变元素的根源。考虑不使用 <table> 的解决方案如果有可能,请标记。

关于html - 在 Firefox 中,溢出滚动条未显示在 100% 高度 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40262509/

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