Question

如何在中心修复页面（例如：vk.com）。在此网站上，如果显示/隐藏滚动条 - 容器位置不向左/右移动。

我有两个容器：

<header class="topPage" style="width:100%;height:50px;position:fixed;top:0;left:0;">
    <div class="wrap" style="margin:0 auto;width:860px;">
    </div>
</header>

和

<section class="centerPage" style="width:100%;position:relative;padding-top:50px; display:inline-block">
    <div class="wrap" style="margin:0 auto;width:860px;">
    </div>
</section>

如果滚动条显示/隐藏，我需要修复所有容器。感谢。

Answer 1

首先，为Container Div提供width。

其次，为Container div提供margin-left:auto; margin-right:auto;position:fixed;。

这将有效。

Answer 2

只需将margin: 0 auto;放在容器元素上即可。

这意味着边缘顶部和底部设置为0，左侧和右侧设置为自动，这将使您的容器居中。

修改

如果您检查所链接网站的容器元素，您会发现它们完全相同。

编辑2

该网站将围绕内容设置容器的宽度，我们将此scrollFix命名为减去文档准备好的javascript上滚动条的宽度。

$(document).ready(function () { var documentWidth = document.body.clientWidth; $('.scrollFix').width(documentWidth - 16); // 16px for scrollbar width $('.container').width(documentWidth * 0.8); // 0.8 for 80% of the page });

示例中的jsFiddle： http://jsfiddle.net/fT3Rm/1/

编辑NUMERO 3

使用HTML结构如下：

<header id="header"> <div class="wrap"></div> </header> Second - <section id="section-1"> <div class="wrap"></div> </section>

您可以使用此jQuery代码：

$(document).ready(function () { var documentWidth = document.body.clientWidth; $('#header, #section-1').width(documentWidth - 16); // 16px for scrollbar width $('.wrap').width(documentWidth * 0.8); // 0.8 for 80% of the page });

这样，标题和节元素的宽度为100％减去滚动条宽度。包裹div应为margin: 0 auto;，在功能中你可以将0.8改为任何你想要的百分比，0.7为70％，0.6为60％等。

您还应将标题和部分设置为position: relative;，以便它不会移动。所以在你的CSS中：

#header, #section-1 { position: relative; }

jsFiddle：http://jsfiddle.net/fT3Rm/3/

阻止内容在滚动条显示/隐藏时水平移动

2 个答案: