垂直滚动条通向水平滚动条
我的CSS看起来像这样：
div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: auto;
overflow: auto;
...
}div的高度和宽度会自动缩放。不过，高度已经固定了一个最大值:一旦达到这个值，垂直滚动条就会出现。这一切都很好用。
现在的问题是：
如果出现垂直滚动条，它们将占用大约10px的水平空间，因为滚动条将放置在div内部。
但是，宽度不会自动缩放，以允许垂直滚动条使用这些额外的10个左右的像素。由于添加垂直滚动条之前的水平宽度正好适合内容(正如width:auto设置所预期的那样)，因此div now 也会显示水平滚动条-以允许缺少10个像素。这太傻了。
- 如何避免使用这些水平滚动条并仅自动缩放
div的宽度以使垂直滚动条适合？
如果可能的话，我正在寻找一个解决方案，它不依赖于完全禁用水平滚动，因为这可能会在某些点上需要(即某些输入)。
回答 5
Stack Overflow用户
发布于 2012-12-10 22:10:52
我找到了一个有效的解决方案，但远不完美：
我在我的div中添加了一个padding-right : 15px，以自动增长整个div。现在，如果出现垂直滚动条，它们将适合填充，因此水平宽度仍然可以。
遗憾的是，当不需要垂直滚动时，当然也会出现填充，这使得我的div只比必须的稍宽一点……:/在我看来，这仍然比不需要的水平滚动条更可取。
Stack Overflow用户
发布于 2015-04-27 08:28:17
我刚刚想出了一个相当不错的解决方案(至少对我这个问题的版本来说是这样)。
我假设width: auto的问题是它的行为类似于width: 100vw；问题是当垂直滚动条出现时，视口宽度保持不变(尽管滚动条约为10px )，但可视区域(我称之为它)减少了10px。
显然，通过百分比定义宽度根据这个“可见区域”来定义它，因此将您的代码更改为：
div.SOMECLASS {
position: absolute;
max-height: 300px
height: auto;
width: 100%;
overflow: auto;
...
}应该允许内容正确地重新缩放！
附注：你也可以添加overflow-x: hidden，这将阻止水平滚动条的出现，当垂直滚动条出现时，只需将div右侧的~10px去掉即可。
Stack Overflow用户
发布于 2019-10-18 19:29:40
通常，设置100vw是问题所在。只要去掉它，你的宽度将是100%，这将是你想要的。
https://stackoverflow.com/questions/13569610
复制相似问题