带有溢出-y滚动的div的Bootstrap导致网页的水平滚动

Question

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

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

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

我的页面有12列。当我没有这个带有overflow-y滚动的div时，整个网页页面（不是div）都有一个滚动的水平滚动条。我认为额外的水平宽度实际上等于div中滚动条所需的额外空间量（也许bootstrap不考虑div中滚动条的宽度来计算其页面宽度？）。无论如何，无论我收缩和放大我的网页（在巨大的显示器上）有多少，仍然有水平滚动条。任何人都有任何建议，我可以做到摆脱恼人的水平滚动条？

Answer 1

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

现在非常好的浏览器支持盒子大小调整，但您仍然希望使用供应商前缀：

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