前端之家收集整理的这篇文章主要介绍了
html – 当滚动条出现时,防止居中的布局移动其位置，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我的
页面布局看起来
something like this：
<style type="text/css">
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="content-wrap">
</div>
您会注意到，当垂直滚动条出现时，content-wrap div会将其位置移位。一种情况是当浏览器开始逐渐呈现页面而不显示垂直滚动条，然后确定需要滚动条，因为内容高于“fold”。这将div向左移动10px左右。
什么是最好的方式来解决这个问题，而不强制浏览器总是显示滚动条？
恐怕
解决这个问题的最好
方法是强制使用html {overflow-y：scroll;}随时可以看到滚动条。您所遇到的问题是，当出现滚动条时，“可用区域”会缩小为10像素。这导致您左侧的计算余量缩小到滚动条宽度的一半，从而将居中的
内容稍微偏移到左侧。
可能的解决方案可能是使用JavaScript来计算边距，而不是使用margin：0 auto;并以某种方式补偿滚动条出现时的“丢失”像素，但是我恐怕会变得凌乱，并且在计算和应用新的边距时内容可能会移动一点点。
原文链接：https://www.f2er.com/html/233208.html
