web-dev-qa-db-ja.com

スティッキーフッターがコンテンツをカバーしないようにする方法...？

「スティッキー」フッターを使用していますが、数ページでコンテンツをオーバーレイしています。これを防ぐ方法はありますが、「粘着性」のある品質を維持していますか？

HTMLとbodyでmin-height:を使用してみましたが、うまくいきませんでした。

CSS：

html {
    background: black url(images/bg2.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}
#container {
    min-height: 100%;
    position: relative;
    height: 100%;
    min-width: 900px;
    overflow: hidden;
}
#body {
    padding-bottom: 100px;
    float: left;
    background-color: rgba(0,0,0,0.7);
    width: 750px;
    height: 400px;
}
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
}

HTML：

<body>

<div id="container">

  <div id="header">
    <div class="logo">C</div>

     <ul class="main_nav">
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="music.html">Music</a></li>
       <li><a href="services.html">Services</a></li>
       <li><a href="gallery.html">Gallery</a></li>
       <li><a href="contact.html">Contact</a></li>
     </ul>
  </div>

  <div id="body">
   <div id="bio_wrapper">

   </div>
  </div>

  <div id="footer">
    <span class="footer_text">Copyright © 2013<br />All Rights Reserved.</span>
  </div>

</div>

</body>
htmlcssfootersticky-footer
14
pianoman

アミットが言ったように、あなたはbodyにmargin-bottomを置き、heightの代わりにmin-heightを使うべきです：

body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
}

そして、あなたはheight：100％を<body>から削除する必要があります

お役に立てれば！

19
LRA

Body divがフッターdivの開始前に閉じている場合は、margin-bottomプロパティを使用します。ページ構造が次の場合の例

<div id="body">
</div>
<div id="footer">
</div>

次に書く

#body{
   margin-bottom: (height of your footer);
}

あなたのコード構造がそのようなものでない場合。つまり、フッターのdivがbody divの中にあるということです。次に、フッターdivが開始する直前に閉じるdivにそのmargin bottomプロパティを使用します。

7
amit ghosh

このソリューションをご覧ください 。すべてのメインコンテンツ要素（ヘッダー、記事、フッター）に絶対配置を使用できます。さまざまな画面幅（レスポンシブデザイン）でヘッダーまたはフッターの高さを変更する必要があり、メインコンテンツ領域にオーバーフローを非表示にするように指示する必要がある場合は、@ mediaクエリを使用してさまざまな解像度でブレークを作成します。このようにして、メインのコンテンツ領域内でフローティングの相対レイアウトを使用することもできます。

2
Craig

フッターの前の最後のdivに、style = "height：100％; padding-bottom：0;"を追加するだけです。おそらく競合する一般的なルールを上書きします。

0
negman