垂直滚动条导致水平滚动条 [英] Vertical Scrollbar leads to horizontal scrollbar

问题描述

我的CSS看起来像这样：

My CSS looks like this:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

div的高度和宽度自动缩放。高度固定了一个最大值：一旦达到这个值，垂直滚动条就会出现。

The div height and width scale automatically. The height has fixed a maximum though: as soon as this value is reached vertical scrollbars appear. This works all pretty swell.

现在的问题：

如果垂直滚动条出现，它们会占用大约10px的水平空间，因为滚动条将被放置在 div 内。

不过，宽度是 not 自动缩放，允许垂直滚动条使用这些额外的10像素。由于添加垂直滚动条之前的水平宽度正好适合内容（如预期从 width：auto 设置）， div 现在也显示水平滚动条 - 允许丢失10像素。这是愚蠢的。

Now the issue:
If the vertical scrollbars appear, they use up around 10px of horizontal space, as the scrollbars will be placed inside the div.
However, the width is not autoscaled to allow for these additional 10-something pixels used up by the vertical scrollbars. As the horizontal width before the adding the vertical scrollbars was just exactly right for the content (as expected from the width:auto setting), the div now also displays horizontal scrollbars - to allow for the missing 10 pixels. This is silly.

• 如何避免这些水平滚动条，只是自动缩放 div 使垂直滚动条适合？



如果可能，我正在寻找一个不完全依赖的解决方案禁用水平滚动，因为这可能需要在某一点（即某些输入）。

If possible I am looking for a solution which does not rely on just completely disabling horizontal scrolling, as this will probably be needed at some point (i.e. for certain inputs).

推荐答案

是非常完美的：

我添加了一个 padding-right：15px 整个div。现在如果垂直滚动条出现，它们适合填充，所以水平宽度仍然可以。

I added a padding-right : 15px to my div, to automatically grow the entire div. Now if the vertical scrollbars appear, they fit within the padding so the horizontal width is still ok.

遗憾的是，当不需要垂直滚动时，使我的div只是一个稍宽比它必须...：/好，在我眼中这仍然是更好的不必要的水平滚动条。

Regretfully the padding of course also shows up when no vertical scrolling is needed, making my div just a tiny bit wider than it would have to be... :/ Well, in my eyes this is still preferable to unneeded horizontal scrollbars.

这篇关于垂直滚动条导致水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！