垂直滚动条通向水平滚动条

Question

我的CSS看起来像这样:

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

div高度和宽度自动缩放.虽然高度已固定最大值:一旦达到此值,就会出现垂直滚动条.这很有效.

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

• 如何避免使用这些水平滚动条并自动调整宽度div以使垂直滚动条适合？

如果可能的话我找的不依赖于只是完全禁用水平滚动,因为这可能会在某些时候需要(即对某些输入)的解决方案.

Answer 1

我找到了一个有效但远非完美的解决方案:

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

遗憾的是,当没有垂直滚动时,填充当然也显示出来,使得我的div只比它本来要宽一点......:/嗯,在我眼里,这仍然比不需要的水平滚动条更好.

Answer 2

刚刚想出了一个非常合理的解决方案(至少对我这个问题的版本而言).

我认为问题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.