Question

我正在使用“中心页眉/页脚/ 2列CSS”布局。

在test1.htm中，如果它们是最小页面内容并且页面页脚在浏览器窗口中完全可见，那么当您单击test2.htm时，页面内容将向左移动。

如果test1.htm有足够的内容将页脚从浏览器窗口的底部推开，那么当您单击test2.htm时，页面内容将保持不变。

任何人都可以帮助解决这个问题吗？

test1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

<style type="text/css">

body, html 
{
    margin:0;
    padding:0;
    font-size: 1em;
  font-family:  Verdana, Arial, Helvetica, sans-serif;  
}   

#wrap 
{
    width:912px;
    margin:0 auto;
    background:Green;
}

#header 
{
    background-color:Gray;
    height: 120px;
}

#leftColumn 
{
    float:left;
    width:230px;
    padding: 0 10px 10px 10px;
    background:Red;
}

#rightColumn 
{
    float:right;
    width:642px;
    padding:10px;
    background:#fff;
    font-size: 0.7em;
    color: #828589;
}

#footer 
{
    clear:both;
    padding:5px 10px;
    background-color:Gray;
}



</style>    

</head>


<body>
  <div id="wrap">
    <div id="header">
      <div id="nav">
       <a href="test1.htm">test1</a> <a href="test2.htm">test2</a> 
      </div>
    </div>
    <div id="leftColumn">
      <p>
      left column
      </p>   
      <br /><br /><br /><br /><br /><br />
    </div>
        <div id="rightColumn">
          <div id="PageContent">

      <!-- START PAGE CONTENT -->

        <h1>Page Title </h1>
        <h4>"test 1 "</h4>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...
        <!-- 
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        -->

      <!-- END PAGE CONTENT -->
      </div>



    </div>
    <div id="footer">

      the footer

    </div>
  </div>
</body>
</html>

test2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

<style type="text/css">

body, html 
{
    margin:0;
    padding:0;
    font-size: 1em;
  font-family:  Verdana, Arial, Helvetica, sans-serif;  
}   

#wrap 
{
    width:912px;
    margin:0 auto;
    background:Green;
}

#header 
{
    background-color:Gray;
    height: 120px;
}

#leftColumn 
{
    float:left;
    width:230px;
    padding: 0 10px 10px 10px;
    background:Red;
}

#rightColumn 
{
    float:right;
    width:642px;
    padding:10px;
    background:#fff;
    font-size: 0.7em;
    color: #828589;
}

#footer 
{
    clear:both;
    padding:5px 10px;
    background-color:Gray;
}

* html #footer {
    height:1px;
}  



</style>    

</head>


<body>
  <div id="wrap">
    <div id="header">
      <div id="nav">
       <a href="test1.htm">test1</a> <a href="test2.htm">test2</a>  
      </div>
    </div>
    <div id="leftColumn">
      <p>
      left column
      </p>   
      <br /><br /><br /><br /><br /><br />
    </div>
        <div id="rightColumn">
          <div id="PageContent">

      <!-- START PAGE CONTENT -->

        <h1>Page Title </h1>
        <h4>"test 2 "</h4>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

      <!-- END PAGE CONTENT -->
      </div>



    </div>
    <div id="footer">

      the footer

    </div>
  </div>
</body>
</html>

Answer 1

听起来第一页足够短，没有滚动条显示，而第二页则没有。

滚动条占用空间，因此画布更窄，因此画布的中心更远离滚动条。

解决方案是使用溢出来一直显示滚动条（我不建议这样做，它在滚动时不能进行滚动）或使用左对齐设计（如大多数WWW）< / p>

Answer 2

这是因为test2.htm右侧有滚动条 - ＆gt;这使得test2.htm的宽度小于test1.htm的宽度 - ＆gt;中心内容位置由浏览器计算，采用不同的宽度值=＆gt;这就是为什么在每种情况下左侧位置都不同......

Answer 3

#wrap div左右的自动边距导致整个内容居中于正文的可用宽度。在test2中，可用宽度因滚动条的外观而减小，因此内容似乎向左移动了一半滚动条宽度。

Answer 4

所以看起来具有更多内容的页面强制浏览器窗口有一个滚动条，这反过来将居中的div推到左边，因为滚动条的外观减少了可用区域。

所以可能的解决方案是没有居中的div，即将wrap id css更改为

#wrap 
{
    width:912px;
    margin:0 0 0 0;
    background:Green;
}

这对我正在使用的东西看起来并不好。

另一个解决方案是溢出，即添加此

  html
  {
    overflow:scroll;    
  }

这实际上看起来不错，所以可能会继续使用它。

我确实找到了另一种使用基于this

的JQuery的解决方案

将#wrap更新为

#wrap 
{
    width:912px;
    margin:0 0 0 0;
    background:#fff;
        visibility: hidden;
}

然后在每个页面中使用以下内容

  <script type="text/javascript">
    jQuery.fn.center = function() {
      this.css("position", "absolute");

      // Use This line On 'Short Page Content'
      this.css("left", ($(window).width() - (this.width()+18)) / 2 + $(window).scrollLeft() + "px");

      // Use This line On 'Long Page Content'
      this.css("left", ($(window).width() - (this.width())) / 2 + $(window).scrollLeft() + "px");


      return this;
    }

    $(document).ready(function() {
      $('#wrap').center();
      $('#wrap').css("visibility", "visible");
    });

  </script>

Answer 5

为什么要做所有这些，只需要保持滚动条始终可见！

html{
   height:101%;
}

Answer 6

最好的办法是不要担心滚动条。您正在修复一个不存在的“问题”。每个中心网站都有同样的问题。

这是“预期行为”，您的用户都不会注意到您的页面向左移动了几个像素 - 尤其是在页面刷新时。

想一想 - 你有没有在其他网站上注意到这一点？

Answer 7

height: 100%;
overflow-y:scroll;

Answer 8

对于我的网站，Safari中的页面之间没有“摆动” - 我只在Firefox中注意到它，而Paul Rowland建议使用overflow: scroll的工作完美，因为该网站在Safari中不受影响，但在Firefox中已经更正。非常有帮助，谢谢！

我无法相信在这个网站上的建议，如“不要担心它”，不要投票被遗忘。

Answer 9

非常感谢，伙计们。我今晚有同样的文字转换问题，很幸运能找到这个网站和你的上述建议。

我的两个页面的行为方式相同 - 一个创建了滚动条而另一个没有创建。通过将以下代码添加到style.css文件来解决文本转换问题：

html { overflow:scroll; }

Answer 10

如果您正在加载javascript以显示类似于Facebook的按钮或来自其他类似的来源，该页面将加载放置在那里的facebook div然后再次摆脱它导致移位。尝试使用css进行修复，以便为facebook / div设置一个高度。

为什么此页面的内容会向左/右移几个像素？

10 个答案: