gpt4 book ai didi

javascript - 当div中有很多新内容时如何滚动y

转载 作者:行者123 更新时间:2023-11-28 02:15:16 26 4
gpt4 key购买 nike

在我的元素中,我使用 easyui-layout。

有时,我应该使用ajax 从其他页面加载其他内容。而这些新内容将被放置在cenDiv的中心区域。

ajax代码是:

$.ajax({
.....
success:function(data)
{
$("#cenDiv").html(data);
.......
}
});

现在,我遇到了一个问题。当内容太多溢出cenDiv时,没有滚动。所以cenDiv中只展示了部分内容。

这是我的 html 代码:

<body style="height:100%" class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;height:88%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:100%;padding:10px" data-options="region:'west',split:true,title='Function'"></div>

<div id="cenDiv" class="easyui-layout" style="position:static;height:100%;width:100%" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>

我在 body、firDiv 和 cenDiv 中设置了 fit="true",但它失败了。因为body的高度改变了firDiv和cenDiv。

我尝试了 overflow:auto,但它再次失败。

只有cenDiv在content数据过多时显示滚动,其他div位置不变。

谁能帮帮我?

最佳答案

你需要在 cenDiv 上同时使用 max-height 和 overflow-y:

max-height: 100px;
overflow-y: auto;

没有最大高度,滚动将不会出现。

反正你用的height:100%太多了,“firDiv”里面的div都有。您可以这样更改它们:

<body class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:calc(100vh - 293px);padding:10px" data-options="region:'west',split:true,title='Function'"></div>

<div id="cenDiv" class="easyui-layout" style="position:static;width:100%;height:150px;max-height:150px;overflow:auto;" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>

关于javascript - 当div中有很多新内容时如何滚动y,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48513689/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com