HTML5(CSS+JS)でページ下部にフッターを配置する方法を詳しく解説

この記事ではHTML5のページ下部にフッターを配置する方法(CSS+JS)を詳しく解説し、皆さんに共有します。詳細は以下の通りです。

JavaScript:

 <script type=text/javascript> $(function(){ function footerPosition(){ $(footer).removeClass(fixed-bottom); //Web ページ本文の全テキストの高さ var contentHeight = document.body.scrollHeight, //ブラウザ上部のツールバーを除く、表示されるウィンドウの高さ winHeight = window.innerHeight if(!(contentHeight > winHeight)){ // Web ページのテキストの高さがビジュアル ウィンドウの高さより小さい場合、fixed-bottom クラスをフッターに追加します $(footer).addClass(fixed-bottom) } else { $(footer).removeClass; (fixed-bottom); } } footerPosition (); $(window).resize(footerPosition);

CSS:

 .fixed-bottom { 位置: 固定; 幅: 100%;}

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。