如果超过父高度,如何使子div可滚动？

Question

我有2个子div以行列模式嵌套在父div中:父级是列,子级是行.

上子div具有可变高度,但保证小于父div的高度.

较低的子div也具有可变高度.在某些情况下,子div的高度将使较低的子div超过父级.在这种情况下,我需要使较低的div可滚动.请注意,我只希望下部div可以滚动,而不是整个父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

由于这篇文章在谷歌中仍然排名很高,我想使用flexbox发布一个更好的解决方案.其实这很简单.使用display:flex,flex-direction:column和overflow:隐藏为parent和overflow-y:auto for child.

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

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

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

Answer 2

仅当您给它一个大于时溢出的值时，溢出才有效。您的值与顶部的大小有关，因此使用 jQuery，获取该值，然后从父项中减去。

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

并将overflow's添加到孩子

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

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

http://jsfiddle.net/m9goxrbk/

Answer 3

当你有嵌套的子 div 时

\n

这个解决方案是在div嵌套时滚动溢出的子div而不是滚动整个父div。

\n

\n

请参阅附图。预期的行为位于右侧 \xe2\x9c\x85

\n

\n

将以下 CSS 添加到需要将滚动条向下传递给可滚动子级的所有父级 div ( Parent、Child1、 )。Child2（ flex 列使 div 具有可用高度）

\n

.all-parents {\n   display: flex;\n   flex-direction: column;\n   overflow: auto;\n}\n

\n

Child 3应分配溢出 ( ) 的目标元素overflow: auto以启用滚动。

\n

.element-that-overflows {\n   overflow: auto;\n}\n

\n

注意：您需要为最上面的父级指定固定高度 ( Parent) 以使子级滚动，否则父级滚动。

\n

.parent {\n  height: 100vh;\n}\n

\n\n

在 Stackblitz 中打开

\n

\n