ホームページ >ウェブフロントエンド >htmlチュートリアル >コンテンツが少ない場合、ページのフッターは固定ではなく常に下部に表示されます。 _html/css_WEB-ITnose
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
次の CSS 行をスタイルシートに追加します。 .wrapper のマージンの負の値は、.footer および .push の高さと同じ数値です。負のマージンは常にフッターの高さ全体 (追加できるパディングや境界線を含む) と等しくなければなりません。
}
.wrapper {
min-height: 100%;
height: auto ! important;
height: 100%;
margin: 0 auto -4em;
}
.footer, . Push {
height: 4em;
}
この HTML 構造に従います。 CSS で絶対に配置されない限り、コンテンツを .wrapper および .footer div タグの外側に置くことはできません。また、.push div はフッターを「プッシュ」して何も重ならない隠し要素であるため、その中にコンテンツがあってはなりません。
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
7d84cb105687e4f46528466446206f96
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c207c066cd0c19ad1de5cb71593baf42
e388a4556c0f65e1904146cc1a846beeあなたのウェブサイトコンテンツはここにあります。94b3e26ee717c64999d7867364b1b4a3
e4363f4d8b37773f0d12c2a80ae2abc316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
ffd6ba4147bda351239915f463e46e38
e388a4556c0f65e1904146cc1a846bee Copyright (c) 200894b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
二、js使用、参考これ:(本人未验)证过,看代应该可行)
http://jingyan.baidu.com/article/2fb0ba4054805900f2ec5f9d.html
//footer吸底效果 var _ch = $("#content").height();//这个就是你中间内容div的高度 var _wh = $(window).height();//整个窗口的高度 //console.log("window's height",_wh,"content's height",_ch,"_wh - _ch:",_wh - _ch); if(_wh - _ch > 192){ $("#content").css("min-height",(_wh-192)+"px"); } //希望这段代码对你有用!