div中有很多新内容时如何滚动y答案

【问题标题】：How to get scroll y when much new content in divdiv中有很多新内容时如何滚动y
【发布时间】：2018-01-30 04:01:19
【问题描述】：

在我的项目中，我使用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的高度发生了变化。

我尝试了溢出：自动，但它再次失败。

只有cenDiv内容数据过多时显示滚动，其他div位置不变。

谁能帮帮我？

【问题讨论】：

标签： javascript jquery html css jquery-easyui

【解决方案1】：

您需要在 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>

【讨论】：

Div 应该适配不同的终结器，例如台式电脑、笔记本电脑。它们是不同的显示尺寸。所以高度尺寸选择%格式，而不是px。
west div 和 center div 是平行的，west 的高度与 center 的高度无关。 height:100% 可以，而不需要 calc(100vh-293px)。

【解决方案2】：

删除位置：静态，并添加

overflow-y:auto

工作正常，例如：

<div id="cenDiv" class="easyui-layout"  style="height:100%;width:100%;overflow-y:auto" data-options="region:'center',title:''">

【讨论】：