容器内的可滚动div

shi*_*ght 34 html css

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

这可能吗?

谢谢!

更新1:

当我问这个问题时,这是我过于简单的更高级的案例:http://jsfiddle.net/Wcgvt/.我需要某种方式,标题+它的兄弟div不会溢出父div的大小.

Chr*_*rew 42

添加position: relative到父级,和max-height:100%; 在div2工作.

<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>?
Run Code Online (Sandbox Code Playgroud)

更新:以下显示"已更新"的示例和答案.http://jsfiddle.net/Wcgvt/181/

使用的秘密box-sizing: border-box,以及一些填充使第二个div高度达到100%,但将其内容降低50px.然后将内容包装在div中overflow: auto以包含滚动条.注意z-indexes以保持所有文本可选 - 希望这会有所帮助,几年后.


Fra*_*ijk 14

如果你放置overflow: scroll一个固定的高度div,div如果内容占用太多空间,它将滚动.


Not*_*Jay 9

而不是overflow:auto,尝试 overflow-y:auto.应该像魅力一样工作!


Tre*_*and 5

这就是你想要的吗?

<body>
   <div id="div1" style="height: 500px;">
     <div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
       <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
     </div>
   </div>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/fMs67/1/