叠加层上的垂直滚动条答案

【问题标题】：vertical scroll bar on overlay叠加层上的垂直滚动条
【发布时间】：2018-09-23 16:57:59
【问题描述】：

我创建了一个宽度为 700 像素、高度为 500 像素的叠加层。它的内容会很长，因此用户必须能够在叠加层中向上/向下滚动。

考虑到每个浏览器中滚动条的宽度不同这一事实，我能否获得有关如何设置的建议？

例如，如果我将 15px 的 padding-right 添加到覆盖包装，它在 Firefox 中显示得很好。内容将完全适合 div，并且不会出现水平条。

但是在另一个浏览器中，垂直滚动条可能是 20px 宽，这会导致内容被强制水平滚动，或者，如果我禁用 overflow-x，它们会在右侧被截断 5px。

我怎样才能让无论浏览器如何，当垂直滚动条出现时，overlay wrapper 的宽度都会调整，使其内容可以在没有水平滚动条的情况下完美显示？

【问题讨论】：

把height=100%; 放到覆盖层
对不起，我想我不清楚。我不能使用 height: 100% 因为这会导致整个页面滚动，我只想在覆盖层本身内滚动。我将更新我上面的问题以更清楚。
您的意思是覆盖层应该根据内容和浏览器采用动态高度？
包装器的宽度/高度不是静态的，700 像素 x 500 像素。但是叠加层中的内容设置为 700 像素 x 900 像素，因此叠加层右侧会有一个滚动条。如果我将包装器设置为 715 像素并将内容设置为 700 像素，则一切正常。但是如果在另一个浏览器中滚动条实际上是
它是 html 的默认行为。首先，覆盖>内容。如果内容 > 覆盖，滚动条应该出现。你必须为跨浏览器兼容地维护它

标签： html css

【解决方案1】：

Overflow property 听起来像你需要的：overflow:scroll;？但我想我不确定您对不同宽度的滚动条的关注是什么。这是如何设置变量的？

或者以不同的方式看待您的问题，将带有覆盖包装器的 div 放在另一个 div 中，并让新 div 具有滚动属性，从而使其第一个直接与滚动条无关。例如：[link]

编辑：看看你提供的例子，你想要this这样的东西吗？技巧就像我上面所说的，将 div 放在所有东西周围，而不是给它一个宽度并让它 display:inline-block; (display) 所以它适合孩子（但滚轮留在孩子外面）。

编辑 2： 请注意，如果您需要它在屏幕上居中，则必须有另一个父 div 围绕内联块，并且内联块 text-align:center;。 (example)

【讨论】：

【解决方案2】：

使用 max-width 和 jquery 滚动条插件 jscrollpane。

如果需要，您可以为每个浏览器定义滚动条的宽度和样式。

【讨论】：