Html 超过父级高度时如何使子div可滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27784727/
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
How to make child div scrollable when it exceeds parent height?
提问by user2066880
I have 2 child divs nested in a parent div in row-column pattern: the parent is a column, and the children are rows.
我有 2 个子 div，它们以行列模式嵌套在父 div 中：父 div 是一列，而子 div 是行。
The upper child div is of variable height, but is guaranteed to be less than the height of the parent div.
上层子 div 的高度可变，但保证小于父 div 的高度。
The lower child div is also of variable height. In some cases, the heights of the child divs will make the lower child div exceed the parent. In this case, I need to make the lower div scrollable. Note that I want only the lower div to be scrollable, not the whole parent div.
较低的子 div 也是可变的高度。在某些情况下，子 div 的高度会使较低的子 div 超过父级。在这种情况下，我需要使较低的 div 可滚动。请注意，我只希望较低的 div 可滚动，而不是整个父 div。
How do I handle this?
我该如何处理？
See attached jsfiddle for case example: http://jsfiddle.net/0yxnaywu/5/
有关案例示例，请参见附加的 jsfiddle：http: //jsfiddle.net/0yxnaywu/5/
HTML:
HTML：
<div class="parent">
<div class="child1">
hello world filler
</div>
<div class="child2">
this div should overflow and scroll down
</div>
</div>
CSS:
CSS：
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
}
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
采纳答案by caleb.breckon
Overflow only works when you give it a value to overflow when greater than. Your value is relative to how big the top is, so using jQuery, grab that value then subtract from the parent.
仅当您给它一个大于时溢出的值时，溢出才有效。您的值与顶部的大小有关，因此使用 jQuery，获取该值，然后从父项中减去。
$(document).ready(function() {
$(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});
and add overflow's to the children
并将overflow's添加到孩子
.child1 {
background-color: red;
overflow: hidden;
}
.child2 {
background-color: blue;
overflow: auto;
}
回答by Pawel Sas
Because this post is still ranking very high in Google, I'd like to post a better solution using flexbox. Actually this is very simple. Use display: flex, flex-direction: columnand overflow: hiddenfor parent and overflow-y: autofor child.
因为这篇文章在谷歌的排名仍然很高，所以我想发布一个使用 flexbox 的更好的解决方案。其实这很简单。使用display: flex, flex-direction: column和overflow: hidden为父级，overflow-y: auto为子级。
.wrapper {
display: flex;
flex-direction: column;
overflow: hidden;
}
.scrollable-child {
overflow-y: auto;
}
Here's the pen: https://codepen.io/pawelsas/pen/vdwjpj
回答by antyrat
Use overflowproperty:
使用overflow属性：
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
overflow: auto;
}
EDIT:
编辑：
if you want only second div to be scrollable, you need to change it height to 30pxso child1and child2will exactly fit the parent heightand add overflowproperty there:
如果您只希望第二个 div 可滚动，则需要将其高度更改为30pxsochild1并且child2将完全适合父级height并在overflow那里添加属性：
.parent {
width: 50px;
height: 100px;
border: 1px solid black;
}
.child1 {
height: 70px;
background-color: red;
}
.child2 {
height: 30px;
background-color: blue;
overflow: auto;
}
