如何包含“溢出：自动”的宽度；动态大小的绝对 div 中的滚动条？答案

【问题标题】：How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?如何包含“溢出：自动”的宽度；动态大小的绝对 div 中的滚动条？
【发布时间】：2012-01-14 15:03:54
【问题描述】：

（关于 Stack Overflow 的第一个问题。希望我做对了。）

我正在尝试创建一个浮动菜单，该菜单从其内容继承其宽度（因为我事先不知道宽度，即从 URL 加载）。我可以通过让菜单 div 绝对定位而不设置宽度或高度来做到这一点。

当内容高到需要滚动时，就会出现问题。我设置“溢出：自动；”以便它可以垂直滚动，但新的滚动条不会使 div 更宽。取而代之的是，div 保持相同的宽度，并且滚动条会突出到之前大小合适的内容中，从而强制内容换行。

示例：http://jsfiddle.net/w7Mm8/

在示例中：在 Firefox 中，“5”被换行到下一行，但在 Chrome（至少对于 Mac）中，它全部显示在一行中。

在不明确设置菜单宽度以包括滚动条宽度的情况下，有什么优雅的方法可以做到这一点？

谢谢！

【问题讨论】：

据我所知，不使用 JavaScript 是无法做到这一点的。如果我错了，我很想听听！
丑陋的 hack-fix 是，当您知道内容太高并且滚动条将可见时，您可以将包含 div 的宽度显式设置为其当前内部宽度 + 浏览器的宽度滚动条（即使用这样的代码：jdsharp.us/jQuery/minute/calculate-scrollbar-width.php）。在 Mac 版 Chrome 中，滚动条宽度为 0，因此不会增加任何额外空间。在 Firefox for Mac 中，滚动条宽度为 15。
是的，这就是我所说的那种 JavaScript。
有趣的是，无论你在 div 上放置多少右填充，如果出现滚动条，它仍然会包裹在 FF 中。见jsfiddle.net/w7Mm8/30。
@Tristan 您提供的用于计算滚动宽度的链接中的代码存在错误。您需要在它动态创建的 html 中添加一个额外的 </div>。

标签： html css menu scrollbar positioning

【解决方案1】：

你有几个选择。

使用white-space:nowrap; 和一些padding。

使用overflow: scroll;，它在底部添加了一个额外的滚动条，但修复了 Firefox 中的换行问题。

使用overflow-y:scroll，它是 CSS3，只有现代浏览器支持。

【讨论】：

这是迄今为止最好的解决方案，尽管从技术上讲，它们都不能完美地解决问题。当滚动条不可见时，white-space:nowrap; 填充是无关的。即使没有必要，overflow[-y]:scroll; 选项也会显示滚动条。将这三种情况中的任何一种包装在一个小的 Javascript 中（当内容太高时）可以解决这个问题，并且肯定比我强制新宽度的解决方案更好，所以我暂时使用它。谢谢！
（奇怪的是overflow:scroll; 将滚动条宽度添加到内容中，而overflow:auto; 没有，即使滚动条在两种情况下都可见。）
另外，white-space:nowrap 将强制水平滚动长内容：jsfiddle.net/w7Mm8/32。

【解决方案2】：

我偶然发现了这个。设置white-space: normal实际上使Firefox将滚动条推到外面。见http://jsfiddle.net/w7Mm8/36/。

编辑：等等...不是只有五个（之前的小提琴有六个字）：http://jsfiddle.net/w7Mm8/37/。不知何故，额外的词导致了它的行为。

Edit2：根据上面的奇怪观察（white-space: normal 与它没有任何关系，它是多余的词），有一个奇怪的“解决方法”可以证明对某些人有用（对其他人来说很痛苦）。见（五个字）http://jsfiddle.net/w7Mm8/49/，（六个字）http://jsfiddle.net/w7Mm8/57/。 content 必须设置为 3 个字符并且不能是空格（来自我的实验）。注意：伪元素必须在文本内容所在的位置，无论多深，请参阅：http://jsfiddle.net/w7Mm8/58/ 不起作用。

【讨论】：