具有固定大小的div中的滚动条的div [英] divs with scrollbars in div with fixed size
本文介绍了具有固定大小的div中的滚动条的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我基本上有这样的布局:
I basically have a layout like this:
<body>
<div style="height: 150px; width: 200px; background: green">
<div style="overflow: auto; max-height: 100px; background: blue">
some content <br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
<div style="overflow: auto; background: red">
some more content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
</div>
</body>
现在，我希望第二个div填充父div的所有剩余高度，并在需要更多空间时显示滚动条.我怎样才能做到这一点?目前，第二个div永远不会显示滚动条，而只会使用它所需的空间，即使它会超过父级的总高度...
Now, I want the second div to fill all remaining height of the parent div and show the scroll bar if more space is needed. How can I achieve this? Currently, the second div never shows a scroll bar and just uses the space it needs, even if that will exceed the parents total height...
更新:
请测试您提供的解决方案:-)
UPDATE:
Please test the solution you provide :-)
推荐答案
使用Jquery可能会帮助
Using Jquery might help
<body>
<div style="height: 150px; width: 200px; background: green">
<div id="c1" style="overflow: auto; max-height: 100px; background: blue">
some content <br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
<div id="c2"style="overflow: auto; background: red">
some more content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
</div>
在document.ready中添加
in document.ready add this
var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);
这篇关于具有固定大小的div中的滚动条的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
