css - 带有溢出-y滚动的div的引导程序导致网页的水平滚动

Question

我有一个带有以下 HTML 的 div 的 HTML 页面（使用 Bootstrap 3）：

style="overflow-y:scroll; height:500px;"

这导致 DIV 有一个滚动条（因为它有很多内容）。

我的页面有 12 列。当我没有这个带有溢出-y 滚动的 div 时，整个网页页面（不是 div）都有一个滚动的水平滚动条。我认为额外的水平宽度实际上等于 div 中滚动条所需的额外空间量（也许引导程序没有考虑 div 内滚动条的宽度来计算其页面宽度？）。无论如何，无论我如何缩小和放大我的网页（在一个巨大的显示器上），仍然有水平滚动条。有人对我可以做些什么来摆脱烦人的水平滚动条有任何建议吗？

Answer 1

滚动条宽度不包含在 div 的宽度中，除非您使用 box-sizing:border-box 明确指定它。

现在对 box-sizing 的浏览器支持非常好，但您仍然需要使用供应商前缀：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;