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

前端之家收集整理的这篇文章主要介绍了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;并以某种方式补偿滚动条出现时的“丢失”像素,但是我恐怕会变得凌乱,并且在计算和应用新的边距时内容可能会移动一点点。

猜你在找的HTML相关文章