Question

同样的问题，没有一个好的答案：
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?

我有<div>固定高度，可作为宽度均匀的按钮菜单。用户可以从菜单中添加/删除按钮。当<div>中有多个按钮可以垂直放置时，我希望它可以滚动 - 所以我使用overflow-y:auto，当{{1}中的内容太大时确实会添加一个滚动条}}。不幸的是，当滚动条显示时，它会重叠菜单按钮，并添加一个水平滚动条 - 最大的问题是它看起来很糟糕。

有没有“正确”的方法来解决这个问题？我喜欢学习一些风格技巧以使其正常工作（即滚动条位于div之外而不是内部，或div在必要时自动扩展以容纳滚动条）。如果javascript是必要的，那很好 - 我已经在使用y - 在这种情况下，正确的事件是检测添加/删除的滚动条，以及如何确保使用正确的宽度跨浏览器/跨界风格的方式？

JSFiddle：http://jsfiddle.net/vAsdJ/

jQuery

Answer 1

首先：删除Trent Stewart已在另一个答案中提到的水平滚动条集overflow-x: hidden;。

CSS方法：

我过去做的一件事是在内容div周围添加一个更宽的包装div，以便为滚动条腾出空间。但是，这仅适用于您的容器宽度是固定的...并且由于滚动条的可变渲染，可能需要在各种浏览器中调整（通过提供不同的样式）。

这里为您的案例jsfiddle。请注意新的包装器<div id="menu-wrap">及其固定宽度width: 95px;。在这种情况下，包装器div正在进行滚动。

你也可以通过给包装器在右边一些填充来解决这个问题，从而避免固定宽度问题。

jQuery方法：

另一种选择是使用jquery检测溢出，如here所述，然后增加div的宽度或填充以腾出空间。您可能仍需要进行特定于浏览器的调整。

这里有一个jsfiddle，其中包含您示例的简化版本。这会使用您的单击功能在每次单击后检查div高度，然后添加一些填充以为滚动条腾出空间; innerHeight和scrollHeight之间的基本比较：

if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
    $('#menu').css( "padding", "0 15px 0 0" );
}

为了使这个跨浏览器友好，您可以检查滚动条宽度（如here所示），然后添加返回的值而不是固定的填充。这里有另一个jsfiddle来演示。

可能还有很多其他方法，但这就是我要采用的方法。

Answer 2

您是否尝试过使用overflow-x：visible;或隐藏

我可以扩展div，以便overflow-y：auto滚动条不会剪辑div内容吗？

2 个答案: