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

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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Que*_*tin 11

这听起来像第一页足够短,没有滚动条显示,而第二页不是.

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

解决方案要么使用溢出来一直显示滚动条(我不建议这样,它在滚动时不能进行滚动)或使用左对齐设计(如大多数WWW)

归档时间：	17 年前
查看次数：	18238 次
最近记录：	9 年，7 月前