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

前端之家收集整理的这篇文章主要介绍了css – 垂直滚动条导致水平滚动条前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的CSS看起来像这样:
div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

div高度和宽度自动调整。高度已经固定了一个最大值:一旦达到这个值,垂直滚动条出现。这一切都相当的膨胀。

现在的问题是:
如果垂直滚动条出现,它们会占用大约10px的水平空间,因为滚动条将放置在div内。
然而,宽度不是自动缩放,以允许这些额外的10个像素用于垂直滚动条。由于在添加垂直滚动条之前的水平宽度恰好恰好适用于内容(如从宽度:自动设置预期的那样),div现在还显示水平滚动条 – 允许丢失的10个像素。这很傻

>如何避免使用这些水平滚动条,并且仅自动调整div的宽度以使垂直滚动条适合?

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

解决方法

我发现一个解决方案正在工作但远非完美:

添加一个padding-right:15px到我的div,自动增长整个div。现在如果垂直滚动条出现,它们就适合填充,所以水平宽度仍然可以。

令人遗憾的是,当不需要垂直滚动时,填充也会显示出来,使得我的div比它必须要宽一点点…:/嗯,在我看来,这仍然比不需要的水平滚动条更好。

猜你在找的CSS相关文章