如何包含“溢出:自动"的宽度?动态大小的绝对 div 中的滚动条? [英] How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?

问题描述

(关于 Stack Overflow 的第一个问题.希望我做对了.)

(First question on Stack Overflow. Hope I'm doing it right.)

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

I'm trying to create a floating menu that inherits its width from its content (since I don't know the width in advance, i.e. loaded from a URL). I can do this by having the menu div absolutely positioned without setting a width or height.

当内容足够高需要滚动时会出现问题.我设置了溢出:自动；"这样它就可以垂直滚动，但新的滚动条不会使 div 变宽.相反，div 保持相同的宽度，并且滚动条突出到其先前大小合适的内容中，迫使内容换行.

The problem occurs when the content is tall enough to require scrolling. I set "overflow: auto;" so that it can be scrolled vertically, but the new scrollbar doesn't make the div wider. Instead, the div stays the same width, and the scrollbar juts into its previously nicely sized content, forcing the content to wrap.

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

在示例中:在 Firefox 中，five"被换到下一行，但在 Chrome(至少对于 Mac)中，它全部显示在一行中.

In the example: in Firefox, "five" gets wrapped onto the next line, but in Chrome (for Mac at least), its all shown on one line.

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

Any elegant way to do this without explicitly setting the width of the menu to include the width of the scrollbar?

谢谢！

推荐答案

您有几个选择.

使用 white-space:nowrap; 和一些 填充.

使用 overflow: scroll;，它在底部，但修复了 Firefox 中的换行问题.

Use overflow: scroll;, which adds an extra scrollbar on the bottom, but fixes the wrapping problem in Firefox.

使用 overflow-y:scroll 这是 CSS3 并且受支持仅适用于现代浏览器.

Use overflow-y:scroll which is CSS3 and is supported by only modern browsers.

这篇关于如何包含“溢出:自动"的宽度?动态大小的绝对 div 中的滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！