蓝图CSS:如果内容很长,页面会移到左侧



我正在使用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;
}

页面正在移动,还是因为浏览器滚动条正在出现/消失?

考虑设置身体总是有一个滚动条,这应该会解决它。

示例

html {
    overflow-y: scroll;
}

相关内容

  • 没有找到相关文章

最新更新