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

发布时间：2020-12-14 18:25:53 所属栏目：资源来源：网络整理

导读：我有2个子div以行列模式嵌套在父div中：父级是列,子级是行. 上子div具有可变高度,但保证小于父div的高度. 较低的子div也具有可变高度.在某些情况下,子div的高度会使较低的子div超过父级.在这种情况下,我需要使较低的div可滚动.请注意,我只希望下部div可滚动,

我有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;
}

解决方法

溢出仅在大于时为溢出值赋值时才起作用.你的值与top的大小有关,所以使用jQuery,抓取该值然后从父级中减去.

$(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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!