0

私のウェブサイトのウェブページレイアウトは次のようになります。

私のウェブサイトのウェブページレイアウトは次のようになります。

<body>
<div class="container">
   <div class="sidebar">
   </div>
   <div class="content">
   </div>
</div>

<div class="pre-footer">
</div>
<div class="footer">
</div>
</body>

CSS:

body  {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;}
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;}
.container{padding-top:5px;margin-left:100px;margin-right:auto;}
.sidebar {float:left;width:220px;min-height:610px;text-align:center;}
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;}
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}

すべての要素がレイアウトにうまく表示されています。ただし、問題は、コンテナーの高さが小さい場合、フッター要素がコンテナーの下に貼り付き、フッターの位置にとどまらないことです。同様に、高さを 600px に手動で修正してフッターのように見えるようにすると、ブラウザーのサイズ変更時にフッターがコンテナーの下にくっついてしまい、フッターのようには見えません。

この問題を修正するにはどうすればよいですか?

4

1 に答える 1

1

フッターには固定位置を使用します。

div.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 50px; /* change this as needed */
}

スクロールしたときにすべてのコンテンツが表示されるように、本文に下部パディングを指定します。

body {
    padding-bottom: 50px; /* change this to the max-height given for your footer */
}
于 2012-08-15T09:52:21.620 に答える