当子div超出父级高度时，如何使子div可滚动？ [英] How to make child div scrollable when it exceeds parent height?

问题描述

我有2个子div，以行-列模式嵌套在父div中：父是一列，子是行。

I have 2 child divs nested in a parent div in row-column pattern: the parent is a column, and the children are rows.

上层子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的高度会使较低的子div超过父级。在这种情况下，我需要使下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.

我该如何处理？

有关案例示例，请参见附件jsfiddle： http://jsfiddle.net/0yxnaywu/5/

See attached jsfiddle for case example: 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;
}

推荐答案

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

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.

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

并向孩子添加溢出

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

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

http://jsfiddle.net/m9goxrbk/

这篇关于当子div超出父级高度时，如何使子div可滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！