如何包括“overflow：auto;”的宽度。滚动条在动态大小的绝对div？ [英] How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?

问题描述

（Stack Overflow的第一个问题，希望我做的正确。）

我试图创建一个浮动菜单， （因为我不知道预先的宽度，即从一个URL加载）。我可以通过让菜单div绝对定位而不设置宽度或高度来实现。

当内容高到需要滚动时，会出现问题。我设置overflow：auto;所以它可以垂直滚动，但新的滚动条不使div更宽。

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

在示例中：在Firefox中，five获取包装到下一行，但在Chrome中（至少对于Mac），它都显示在一行上。

没有明确设置宽度的任何优雅的方式

解决方案

p>您有几个选项。

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

使用 overflow：scroll; ，

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

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

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.

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.

Example: http://jsfiddle.net/w7Mm8/

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?

THANKS!

解决方案

You have a few options.

Use white-space:nowrap; and some padding.

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

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

这篇关于如何包括“overflow：auto;”的宽度。滚动条在动态大小的绝对div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！