0

以下は、スティッキー フッターの CSS コードの一部です。問題は 1 つだけです。最大化されたウィンドウでサイトを開くたびに、コンテンツが多すぎなければスティッキー フッターが正常に機能します。ただし、復元されたダウン ウィンドウで開くと、フッターがページの途中で終了します。私がやりたいのは、本文のコンテンツの後にフッターを保持することだけです。コンテンツが画面全体に表示されない場合は、フッターが下部に表示され、コンテンツが画面よりも多く表示される場合は、コンテンツの後にフッターが表示されます。この問題を解決するために CSS を変更する方法を教えてください。

.footy {
    height: 100px;
    position:absolute;
    color: #eaeaea;
    background-color: #333333;
    bottom: 0;
    width: 100%;
    max-width:100%;
    margin-left: -8px;
}

.footin {
    padding-top: 45px;
    width:900px;
    margin:0 auto;
}

<div class="footy">
<div align="left" class="footin"> LLC. 2012 All rights reserved &copy; </div>
</div>
4

1 に答える 1

1

フッターを配置したメイン コンテナにmin-heightandを追加してみてください。position:relative

編集:

    <html>
<head>
    <title>You site Title</title>
    <style>
        body,html{margin:0;padding:0;}
        #wrapper{position:relative;min-height:700px;background-color:#ccc;}
        #footer{position:absolute;bottom:0;background-color:#ff4345;height:100px;width:100%;}
    </style>
</head>

 <body>

  <div id="wrapper">

   <div id="header">
     <!-- header code-->
   </div>

   <div id="content">
     <!--your content goes here-->
   </div>

   <div id="footer">
     <!--your footer code goes here-->
   </div>
  </div>

 </body>
</html>

この方法でプロジェクトを完成させることができます。メイン コンテナはビュー ポート全体の高さを持ち、フッターはこのコンテナを下にして相対的に配置する必要があります。

于 2012-06-05T10:12:31.270 に答える