css - 垂直滚动条导致水平滚动条

Question

我的 CSS 看起来像这样:

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

div 高度 和宽度 自动缩放。但是高度有一个固定的最大值:一旦达到这个值就会出现垂直滚动条。这一切都很好。

现在的问题是:
当垂直滚动条出现时，它会占用大约 10 像素的水平空间，因为滚动条将被放置在 inside div 中。
但是，宽度不会自动缩放以允许垂直滚动条用完这些额外的 10 多像素。由于添加垂直滚动条之前的水平宽度对于内容来说恰到好处(正如 width:auto 设置所预期的那样)， div 现在还 显示水平滚动条 - 以允许缺少的 10 个像素。这很愚蠢。

• 我怎样才能避免使用这些水平滚动条并自动调整 div 的宽度以使垂直滚动条适合？

如果可能的话，我正在寻找一种不依赖于完全禁用水平滚动的解决方案，因为在某些时候(即对于某些输入)可能需要这样做。

Answer 1

刚刚想出了一个非常可行的解决方案(至少对于我的这个问题而言)。

我认为 width: auto 的问题在于它的行为类似于 width: 100vw；问题是，当垂直滚动条出现时，视口(viewport)宽度保持不变(尽管有 ~10px 滚动条)，但可视区域(正如我所说的)减少了 10px。

显然，通过百分比定义宽度是根据这个“可视区域”定义的，因此将您的代码更改为:

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

应该允许内容适本地重新缩放!

附注您也可以添加 overflow-x: hidden，这将阻止水平滚动条出现，而只是在垂直滚动条出现时从 div 右侧切掉 ~10px。