蓝图的CSS:页面移动到左侧,如果内容是长(Blueprint CSS: Page moves to

2019-09-19 13:43发布

我使用的蓝图的CSS框架和目前面临的一个奇怪的问题。 如果我的网页内容变得比显示器的屏幕变长和页脚低于,那么整个页面移动了一下它的左侧,但如果我剪短的内容,使其适合withing的屏幕,以便页脚是可见(无需向下滚动),然后在页面移回右侧一次。

我不知道,但我猜测它的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;
}


文章来源: Blueprint CSS: Page moves to left side if the content is long