分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 为什么这个页面的内容会向左/右移几个像素？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

如果test1.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,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>