为什么此页面的内容向左/右移几个像素？ [英] Why does the content of this page shift a few pixels to the left/right?
本文介绍了为什么此页面的内容向左/右移几个像素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用居中的页眉/页脚/ 2列CSS布局。
在test1.htm中，如果它们是最小页面内容，
如果test1.htm有足够的内容将页脚关闭，则在浏览器窗口中完全可见。浏览器窗口的底部，然后当您点击test2.htm的页面内容保持静态。
任何人都可以帮助这个css问题？
test1.htm
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://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>页标题< / h1>
< h4>test 1< / h4>
< 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 />< br />< br />< br / >< br />< br />< br />< br />< br />< br /
- >
<！ - END PAGE CONTENT - >
< / div>
< / div>
< div id =footer>
页脚
< / div>
< / div>
< / body>
< / html>
test2.htm
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://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>页标题< / h1>
< h4>test 2< / h4>
< 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 />< 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>
页脚
< / div>
< / div>
< / body>
< / html>
解决方案窗口有一个滚动条，这反过来把中心的div向左推，因为可用区域已经减少了滚动条的出现。
所以可能的解决方案是没有一个居中的div，即将换行id css更改为
#wrap
{
width：912px;
margin：0 0 0 0;
background：Green;
}
这没有看到我正在使用的东西。
另一个解决方案是溢出，即添加
html
{
overflow：scroll;
}
这实际上看起来不错，所以可能会用它。
我发现另一个解决方案使用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）;
//使用此行On'Short Page Content'
this.css（left，（$（window）.width（） - （this.width（） ）/ 2 + $（window）.scrollLeft（）+px）;
//使用此行On'Long Page Content'
this.css（left，（$（window）.width（） - （this.width（））） 2 + $（window）.scrollLeft（）+px）;
返回这个;
}
$（document）.ready（function（）{
$（'＃wrap'）。center（）;
$（' ）.css（visibility，visible）;
}）;
< / script>
I'm using a "Centred Header/Footer/2 column CSS" layout.
In test1.htm if their is minimal page content and the page footer is fully visible within the browser window then when you click on test2.htm the page content shifts to the left.
If test1.htm has enough content to push the footer off the bottom of the browser window then when you click on test2.htm the page content stays static.
Can anyone help with this css issue?
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>
解决方案So it appears the page with more content forces the browser window to have a scroll bar, this in turn pushes the centred div to the left as the available area has been reduced by the appearance of the scroll bar.
So possible solution is to not have a centred div, ie change the wrap id css to
#wrap { width:912px; margin:0 0 0 0; background:Green; }this didnt look to good with what I was working with.
Another solution was the overflow, ie adding this
html { overflow:scroll; }this actually looks ok, so will probably go with it.
I did find another solution using JQuery based on this
update #wrap to
#wrap { width:912px; margin:0 0 0 0; background:#fff; visibility: hidden; }then use the following in each page
<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>
这篇关于为什么此页面的内容向左/右移几个像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
