gpt4 book ai didi

html - 容器内的可滚动div

转载 作者:技术小花猫 更新时间:2023-10-29 11:41:37 25 4
gpt4 key购买 nike

我有以下 HTML:http://jsfiddle.net/fMs67/ .我想让 div2 遵循 div1 的大小并滚动 div3 的内容。

这可能吗?

谢谢!

更新一:

这是我在提出以下问题时过度简化的更高级案例:http://jsfiddle.net/Wcgvt/ .我需要以某种方式使 header+it 的同级 div 不会溢出父 div 的大小。

最佳答案

添加position: relative到父级,和max-height:100%;在 div2 上有效。

<body>
<div id="div1" style="height: 500px;position:relative;">
<div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>

</body>​


更新:下面显示了“更新”的示例和答案。 http://jsfiddle.net/Wcgvt/181/

秘诀在于使用 box-sizing: border-box 和一些 padding 使第二个 div 高度为 100%,但将其内容向下移动 50px。然后用 overflow: auto 将内容包裹在一个 div 中以包含滚动条。注意 z-indexes 以保持所有文本可选 - 希望这对几年后有所帮助。

关于html - 容器内的可滚动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9811465/

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