Question

我正在使用Blueprint CSS框架，目前面临一个奇怪的问题。如果我的页面内容比显示器屏幕长，而页脚在下面，则整个页面向左移动一点，但如果我缩短内容并使其适合于屏幕以便页脚可见（无需向下滚动），然后页面再次向右移动。

我不确定，但我猜它是clearfix问题。你觉得一样吗？

您能否告诉我如何解决此问题，以便即使内容很长，页面也不会移到左侧？

我的页面结构如下

<div class="container"> 

   <div id="header" class="span-24 "> Header </div>

   <div id="content" class="span-24" >My Main Content with two columns </div>

  <div id="header" class="span-24 "> Header </div>

</div>

CSS

#header{
margin-top:5px;
background-color:#333333;
border: solid 1px #333333;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
height:70px;
}

#content{
margin-top:2px;
min-height:500px;
font-size:12.5px;
line-height:30px;
background-color:#FFFFFF;
color:#404348;
font-family: 'Open Sans', sans-serif;
text-align:justify;
background-color:#FFFFFF; 
min-height:600px;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

#footer{
height: 4em;
background-color:#FFFFFF;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

Answer 1

页面是否在移动，还是因为浏览器滚动条正在显示/消失？

查看将主体设置为始终有滚动条，应该修复它。

实施例

html {
    overflow-y: scroll;
}

蓝图CSS：如果内容很长，页面会移动到左侧

1 个答案: