如何使 child div 在超过 parent 高度时可滚动？

Question

我有 2 个 child div 嵌套在 row-column 模式中的 parent div 中：parent 是一列， children 是行。

上childdiv高度可变，但保证小于parentdiv.

的高度

下面的childdiv也是可变高度的。在某些情况下，child div 的高度会使较低的 child div 超过 parent。在这种情况下，我需要使下方的 div 可滚动。请注意，我只希望下方 div 可滚动，而不是整个 parent div.

我该如何处理？

示例见附件 jsfiddle：http://jsfiddle.net/0yxnaywu/5/

HTML:

 <div class="parent">
    <div class="child1">
        hello world filler
    </div>
    <div class="child2">
        this div should overflow and scroll down
    </div>
</div>

CSS:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

.child1 {
    background-color: red;
}

.child2 {
    background-color: blue;
}

Answer 1

使用overflow 属性:

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
}

jsFiddle

编辑：

如果您只希望第二个 div 可滚动，您需要将其高度更改为 30px 这样 child1 和 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;
}

jsFiddle

Answer 2

Overflow 只有当你给它一个值大于它时才会溢出。您的值与顶部的大小有关，因此使用 jQuery，获取该值，然后从 parent.

中减去

$(document).ready(function() {
  $(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});

并将 overflow 添加到 children

.child1 {
    background-color: red;
    overflow: hidden;
}

.child2 {
    background-color: blue;
    overflow: auto;
}

http://jsfiddle.net/m9goxrbk/

Answer 3

因为这个 post 在 Google 中的排名仍然很高，我想 post 使用 flexbox 的更好的解决方案。其实这个很简单。使用 display: flex, flex-direction: column 和 overflow: hidden 作为父级和 overflow-y：儿童自动。

.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scrollable-child {
  overflow-y: auto;
}

这是笔： https://codepen.io/pawelsas/pen/vdwjpj

如何使 child div 在超过 parent 高度时可滚动？

How to make child div scrollable when it exceeds parent height?

html

css