垂直滚动条导致水平滚动条?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

我的CSS看起来像这样:

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

div的高度和宽度自动缩放。虽然高度固定为最大,但只要达到此值,就会出现垂直滚动条。这工作都很漂亮。

现在的问题: 如果垂直滚动条出现,他们使用了周围的10px的水平空间,如滚动条将放在里面div。 但是,宽度不会自动缩放以允许垂直滚动条使用这些额外的10像素的像素。由于添加垂直滚动条之前的水平宽度恰好适合内容(如width:auto设置所预期的那样),div现在还会显示水平滚动条 - 以允许丢失10个像素。这很愚蠢。

  • 我怎样才能避免使用这些水平滚动条并自动缩放div垂直滚动条的宽度?
提问于
用户回答回答于

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

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

用户回答回答于

只是想出了一个非常合格的解决方案(至少对于我的这个问题的版本)。

我认为这个问题与width: auto它的行为相似width: 100vw; 问题是,当垂直滚动条出现时,视口宽度保持不变(尽管〜10px滚动条),但可视区域(我称之为)减少了10px。

显然,按照百分比定义宽度是根据此“可查看区域”来定义的,因此请将您的代码更改为:

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

应该允许内容重新适当调整!

ps也可以添加overflow-x: hidden,这将停止显示水平滚动条,而只是在垂直滚动条出现时从div的右侧减去〜10px。

扫码关注云+社区