ホームページ >ウェブフロントエンド >htmlチュートリアル >コンテンツが少ない場合、ページのフッターは固定ではなく常に下部に表示されます。 _html/css_WEB-ITnose

コンテンツが少ない場合、ページのフッターは固定ではなく常に下部に表示されます。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:19:101313ブラウズ

一、css を使用する、国外を参照する一解決方法:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Web サイトで CSS スティッキー フッターを使用する方法

次の 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");    }    //希望这段代码对你有用!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。