蓝图CSS：如果内容较长，页面将移动到左侧 [英] Blueprint CSS: Page moves to left side if the content is long

问题描述

我使用Blueprint CSS框架，目前面临着一个奇怪的问题。如果我的页面的内容比监视器屏幕更长，页脚走到下面，那么整个页面向左移动一点，但如果我剪短的内容，使它适合
屏幕，使页脚是可见的（不必向下滚动），然后页面再次向右侧移动。

I am using Blueprint CSS framework and currently facing a strange problem. If the content of my page gets longer than the monitor screen and the footer goes below, then the entire page moves a bit to its left side, but if I cut short the content and make it fit withing the screen so that the footer is visible (without having to scroll down), then the page moves back to the right side again.

我不知道，但我猜它的 clearfix 问题。你觉得一样吗？

I am not sure but I am guessing its clearfix issue. Do you think the same?

你能告诉我如何解决这个问题，使页面不会移动到左侧，即使内容很长？

Could you please tell me how to fix this problem so that the page doesn't move to the left side even if the content is very long?

我的页面结构如下

<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;
}

推荐答案

是因为您的浏览器滚动条正在出现/消失？

Is the page moving, or is it because your browsers scrollbar is appearing/disappearing?

查看设置正文总是有一个滚动条，应该修复它。

Look into setting the body to always have a scrollbar, that should fix it.

示例

html {
    overflow-y: scroll;
}

这篇关于蓝图CSS：如果内容较长，页面将移动到左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！