html – 当滚动条出现时,防止居中的布局移动其位置

发布时间：2020-12-14 21:43:39 所属栏目：资源来源：网络整理

导读：我的页面布局看起来 something like this： style type="text/css"#content-wrap{ margin: 0 auto; width: 800px;}/stylediv id="content-wrap"/div 您会注意到，当垂直滚动条出现时，content-wrap div会将其位置移位。一种情况是当浏览器开始逐渐呈现页面而

我的页面布局看起来 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;并以某种方式补偿滚动条出现时的“丢失”像素，但是我恐怕会变得凌乱，并且在计算和应用新的边距时内容可能会移动一点点。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!