1

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

1 に答える 1

2

ページが移動しているのですか、それともブラウザのスクロールバーが表示/非表示になっているためですか？

常にスクロールバーが表示されるように本体を設定することを検討してください。これで修正されます。

例

html {
    overflow-y: scroll;
}
于 2012-07-16T11:24:02.953 に答える