Question

JSFiddle for the problem.

我在div里面有一个div。内部div包含一个复选框。当选中复选框时，内部div的尺寸超过外部div的尺寸，因此我们得到滚动条，因为parentDiv的overflow属性设置为auto。但是当再次取消选中复选框时，滚动条仍然保留，但内部div的尺寸小于父div的尺寸。似乎重新计算是在记住滚动条占用的尺寸的情况下完成的。有没有办法对付这个，因为当内部div可以放入外部div时我不想要滚动条。

<div ng-controller="MyCtrl" class="parentDiv">
    <div class="childDiv" ng-class="{'changeSize': item.checked}">
        <input type="checkbox" ng-model="item.checked"> 
   </div>
</div>

CSS

.parentDiv {
    height : 100px;
    width : 200px;
    overflow:auto;
    border : 1px solid;
}

.childDiv {
    height : 95px;
    width : 190px;  
    border : 1px solid green;
}
.changeSize { 
    height : 150px;
    width : 250px; 
}

Answer 1

这可以通过三种方式解决。

您可以将您的溢出属性更改为叠加（这将使您的scorllbar成为子div（不是很好））。
```
 .parentDiv {
    height : 100px;
    width : 200px;
    overflow:overlay;
    border : 1px solid;
}
```
您可以将您的父div样式编辑为隐藏，并通过引入时间更改回自动。这是js小提琴的链接 JsFiddle link
你可以检查你的div是否真的需要滚动条，以及通过js改变你的css。 JsFiddle link

Answer 2

问题是一旦滚动条出现childDiv的宽度和高度仍然溢出/触摸滚动条。因此，滚动条即使在未选中时也会保持不变。

要解决此问题，您可以稍微减少childDiv的宽度和高度......

像，

.childDiv {
    height: 80px;
    width: 175px;
    border: 1px solid green;
}

这将确保滚动条与childDiv之间存在间隙，一旦取消选中此复选框，将导致滚动条消失。

更新：

将ng-class="{'changeOverflow': item.checked}"添加到parentDiv，就像这样，

<div ng-controller="MyCtrl" class="parentDiv" ng-class="{'changeOverflow': item.checked}">
    <div class="childDiv" ng-class="{'changeSize': item.checked}">
        <input type="checkbox" ng-model="item.checked"> 
   </div>
</div>

将您.parentDiv改为

.parentDiv {
    height : 100px;
    width : 200px;
    overflow:none;
    border : 1px solid;
}

添加另一个名为.changeOverflow的CSS类作为

.changeOverflow {overflow:scroll;}

这将有效：）

<强> FIDDLE

在调整大小时不会隐藏滚动条。

2 个答案: