Html 具有固定大小的 div 中带有滚动条的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8057894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
divs with scrollbars in div with fixed size
提问by Daniel Hilgarth
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>
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...
现在，我希望第二个 div 填充父 div 的所有剩余高度，并在需要更多空间时显示滚动条。我怎样才能做到这一点？目前，第二个 div 从不显示滚动条，只使用它需要的空间，即使这会超过父母的总高度......
UPDATE:
Please test the solution you provide :-)
更新：
请测试您提供的解决方案:-)
采纳答案by tmjam
Using Jquery might help
使用 Jquery 可能会有所帮助
<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>
in document.ready add this
在 document.ready 添加这个
var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);
回答by Neil
I only know how to do with this using the forthcoming flexbox layout model. This is how you would do it in current versions of Firefox:
我只知道如何使用即将推出的 flexbox 布局模型来解决这个问题。这是您在当前版本的 Firefox 中的做法：
<div style="height: 150px; width: 200px; display: -moz-box; -moz-box-orient: vertical; background-color: green;">
<div style="overflow: auto; min-height: 1px; max-height: 100px; background-color: 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; min-height: 1px; -moz-box-flex: 1; background-color: red;">
some more content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
</div>
回答by tmjam
Set max-height to the second div as well
也将 max-height 设置为第二个 div
<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; max-height: 50px">
some more content<br/>
some content<br/>
some content<br/>
some content<br/>
some content
</div>
</div>
回答by Charlie
I don't think there is a way to do this flexibly, but it's possible if you can know/set the height of the original div and then the next two divs.
我认为没有办法灵活地做到这一点，但是如果您可以知道/设置原始 div 的高度，然后再设置下两个 div 的高度，则有可能。
Here's what I came up with:
这是我想出的：
<body>
<div style="height:200px; 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; min-height:100px; max-height:100px;">
some more content<br/>
some content<br/>
some more content<br/>
some content<br/>
</div>
</div>
</body>
If the original div is 200pxand then the first daughter div is 100px, the remaining space of the second daughter div will be 100px. So, if you set the min-height and max-heighteach to 100px, then the div will fill the remaining space and display a scroll bar if the content is greater than the max-height.
如果原始 div 是200px，然后第一个子 div 是100px，则第二个子 div 的剩余空间将为100px. 因此，如果将min-height and max-heighteach设置为100px，则 div 将填充剩余空间并在内容大于 时显示滚动条max-height。
I'm sure you wanted an answer that would be flexible, depending upon the size of the original parent div, but I don't think it's that easy in this case.
我确定您想要一个灵活的答案，具体取决于原始父 div 的大小，但我认为在这种情况下没有那么容易。
回答by Evan
If you set overflow-y: scroll; and height: auto; on the child element, you should be able to achieve the scrollbar effect without exceeding the parent element
如果你设置了溢出-y：滚动；和高度：自动；在子元素上，应该可以在不超过父元素的情况下实现滚动条效果
