40

CSSを使用して次のスティッキーフッターを作成しました。一番下のページのコンテンツは現在、フッターの後ろに隠れています（添付のスクリーンショットを参照）。すべての本文コンテンツが表示され、フッターがブラウザーウィンドウの下部に固定されるように、CSSを調整するにはどうすればよいですか？ありがとうございました！

ここに画像の説明を入力してください

CSS：

.fo {
    position: absolute;
    left: 0;
    bottom: 0;
    height:65px;
    width: 100%;
    color: #eaeaea;
    margin-left: -8px;
}
4

7 に答える 7

36

明確な div を作成して高さを指定できます。

.clear { clear: both; height: 60px; }

<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>

高さは、フッターの上にコンテンツを保持するために必要なものです。フッターより高い。フッターが 50px の場合。背が高く、私は 60px です。クリアdivの高さ。そのため、スクロールするとフッターは所定の位置に留まりますが、一番下に到達すると、フッターの後ろから流れてくるコンテンツは、覆われることなくフッターの上に押し出される余地があります. とてもシンプルで、完璧に機能しました。

于 2013-08-03T21:04:49.340 に答える
30

過去にインターネットでこの回答に出くわしました。よく働く：

HTML

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

CSS

    html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
/* IE 6 and down:
#container {
   height:100%;
}
于 2012-12-14T17:12:42.160 に答える
0

フッターのすぐ前に空の div を追加し、id (div-spacer) で名前を付けました。

<div id="div-spacer"></div>

次に、最後の要素の高さを取得して div に設定する単純なコード行を作成しました。

$(document).ready(function () {
  $('#div-spacer').css("height",$('.card-transaction:last').css("height"));
});

このソリューションでは、最後の要素が常に表示されます!

于 2018-10-30T18:20:15.247 に答える