2

このリンクの画像を参照してください：

https://docs.google.com/document/d/1r9L9eLBddMOdHAP3KfAx8ND-SF8b8zBl53o88aUbHT4/edit?pli=1

上の画像リンクでは、フッターを黒い長方形で覆っています。下からマージンをとらずに、常に最後の最後に配置する必要があります。

実際、フッターの上のdivを削除したときに問題が発生しました。私はあなたにこれに責任があるコードを与えています：

HTML

<div id="footer">
<div class="shell">
      <!--content here-->
    </div>
     </div>

CSS

.shell { width:988px; margin:0 auto; }
  #footer { height:44px; background:url(images/footer.gif); line-height:44px;
     color:#fff;              
       }
     #footer a{ color:#fff; }

フッターのすぐ上にあるdiv-boxのcss。実際、これはマージンボトムを編集したときに責任がありますが、ボトムからスペースなしでフッターを作成する方法を知りたいです。一方、div-boxのCSSは次のとおりです。

    .box { background:#fbfcfc; height:100%; padding:1px; margin-bottom:10px; }

margin-bottom：140pxを実行すると、最後にフッターが表示されます。しかし、コンテンツが短いか大きいかにかかわらず、下からスペースなしで下にフッターを作成する方法を知りたいです。

あなたの知識を共有してください！

4

3 に答える 3

3

更新：私の同僚も同様の問題を抱えていました。今回は、CSSだけで簡単に答えられるのではないかと思いました。単純な高さベースのメディアクエリは、「コンテンツがビューポートよりも短い場合を除き、コンテンツの下部にあるはずのフッター。この場合、フッターはビューポートの下部に位置合わせする必要があります」という瞬間に完全に機能します。だとしたら。おそらくこれが最もうまくいくはずです：http：//codepen.io/scrimothy/pen/qEivg

最終的に、高さのメディアクエリを使用して、ビューポートの高さがボディとフッターの高さよりも高いか低いかを判断します。次に、リンクに示されているように、メディアクエリを使用してこれらのイベントを異なる方法で処理します。

方法1：常に下に

あなたがそれを常に底に置くようにしようとしているなら、あなたはただ設定することができます

footer {
  position: absolute;
  bottom: 0;
}

ただし、これは、ページコンテンツがビューポートよりも長い場合、フッターテキストの背後にある本文と競合することを意味します。

方法2：最小の高さ

また、ボディコンテンツdivにを設定しmin-heightて、ユーザーのビューポートがどこになると思うかを概算できるようにすることもできます。

.body-content {
  min-height: 580px;
}

これは常にそれを取得するわけではないので、ボディコンテンツとフッターの間にスペースが多すぎる可能性があります（フッターを折り目の下に押す）、またはユーザーが背が高い場合は、フッターとビューポートの下部の間にギャップがある可能性があります予想よりもウィンドウ。

方法3：jQuery（両方の長所）

サイトですでにjQueryを使用している場合は、これが最適な方法です。

var pageHeight = $('body').height(),
  footerHeight = $('footer').height();
if (pageHeight < $(window).height() - footerHeight) {
  $('footer').css({
    'position': 'absolute',
    'bottom': '0'
  });
} else {
  $('footer').css({
    'position': '',
    'bottom': ''
  });
}

これにより、フッターが長いページの場合はコンテンツと正常に一致するようになり、短いページの場合は上記の方法1が使用されます。（cssプロパティを''に設定すると、インラインスタイルからそれらが削除され、定義された設定に戻されます）。

これが短いテキストと長いテキストのデモです

于 2012-10-23T17:28:57.037 に答える
0

最近同様の問題が発生しました-メインのラッパーコンテナがoverflow:hiddenに設定されていないことが判明しました。これにより、問題がすぐに修正されました。フッターを絶対位置に設定する前に、オプションとして再確認してください。

于 2015-02-11T11:49:34.063 に答える