css – 在调整大小时不会隐藏滚动条.

2024年1月7日 132次阅读

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

最佳答案 这可以通过三种方式解决.

>您可以将溢出属性更改为叠加(这将使您的scorllbar成为子div(不是很好)).

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

>您可以将您的父div样式编辑为隐藏,并通过引入时间更改回自动.这是js小提琴的链接
JsFiddle link
>你可以检查你的div是否真的需要滚动条,以及从js改变你的css.
JsFiddle link

点赞