更改容器上的“溢出”属性不会在运行时更改内部元素大小？答案

【问题标题】：Changing "overflow" property on container doesn't change inner element size at runtime?更改容器上的“溢出”属性不会在运行时更改内部元素大小？
【发布时间】：2023-03-12 08:05:01
【问题描述】：

我有一些 js 代码可以在运行时切换“溢出”属性并获取使用“宽度：100%”的内部元素的大小信息。见这里：jsFiddle Demo URL。

$('#container').css('overflow', 'hidden');
$('#size1').text('Inner element size at runtime: ' + $('#content').width());

我发现，当“溢出”在运行时从“自动”更改为“隐藏”时，IE10 和 Firefox 会改变内部元素的大小。但在 Chrome 中，大小不会改变。

知道如何告诉 Chrome 更新内部元素的大小吗？谢谢。

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案1】：

您需要指示浏览器重新绘制元素。这里有一个 stackoverflow 问题，答案很好：How can I force WebKit to redraw/repaint to propagate style changes?

$('#container')
    .css('overflow', 'hidden')
    .each(function(){
        this.style.display='none';
        this.offsetHeight; 
        this.style.display='block';
    });

http://jsfiddle.net/XNtjh/

【讨论】：

【解决方案2】：

将box-sizing:border-box添加到内容器中。

#content {
    border: 1px solid red;
    width: 100%;
    height: 300px;
    box-sizing:border-box;
}

http://jsfiddle.net/gT5PD/

http://www.w3schools.com/CSSref/css3_pr_box-sizing.asp

【讨论】：

感谢您的回答，但它仅在有边界时才有效。 Without border it wouldn't work。在演示中使用边框向您展示这些 div 的样子。实际情况下，可能没有边框。

【解决方案3】：

这可能是因为当溢出设置为自动时，之前被滚动条占用的空间被释放了。

【讨论】：

看来你完全理解我的问题了，太好了！是的，空间来自滚动条，但现在我不知道如何在移除滚动条时自动更改内部元素的大小。
这是浏览器的默认行为。目前唯一可能的解决方法是使用 JavaScript 创建自定义滚动条，或者您可以随时寻找可以做到这一点的插件。