WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:リセットCSSとノーマライズCSSについて
HOME
次の記事:余白設定を完璧にしているはずなのに、画像の下に余白が出来てしまう問題の対処方

サイトのコンテンツが足りずフッターが浮き上がってしまう問題の対処法(JavaScript編)

Web知識|WordPress

 

現在私が作成しているWordPressオリジナルテーマで、サイトコンテンツが足りない場合にフッターパーツが浮き上がってしまう問題を、JavaScriptを使った力技で解決出来たので、備忘録として残しておきます。

※自分用に書いた記事なので、あらゆるサイトに対応した解決法を早急に知りたいという方にはオススメ出来ない内容です。

 

問題の状態と解決した状態

 

2カラムのWordPressテンプレートをサンプルとして、問題の状態(図1)と解決した状態(図2)を添付します。

 

footerパーツが浮き上がった状態

図1.サイトのコンテンツが足りずフッターが浮き上がっている状態

 

フッターが一番下に固定されている状態

図2.フッターが一番下に固定されている状態(分かり易いようにボックスに色付けをしていますが、サイトコンテンツは図1と同様足りていない想定です)

 

図2では、メインボックスとサイドボックスを覆っている大きなコンテンツボックス(黄色く表示されている部分)を押し広げて、フッターが一番下に来るように調整しています。

※メインボックスとサイドボックスはCSSのfloat制御でそれぞれ左寄せしています。「子ボックスが全てfloat(浮き上がった状態)だと、親ボックスの高さが指定されていない場合、親ボックスの高さは0になる」特性から、図1ではコンテンツボックスが表示されていません。

 

 

JavaScriptで対処

 

他にも色々が方法があると思いますが、今回私が採った対処法は以下の手順です。

  1. ツールバー等を除いたブラウザウィンドウの高さを取得
  2. 取得したブラウザウィンドウの高さから、ヘッダーボックス、ナビゲーションボックス、フッターボックスの高さの合計を引き、コンテンツエリアの高さを算出
  3. メインボックス、サイドボックスの高さが、いずれもコンテンツエリアの高さに満たない場合、コンテンツボックスの高さを押し広げる(2で算出した数値を与える)

ブラウザウィンドウ、コンテンツボックス、コンテンツエリア

この手順をJavaScriptコードに変換します。

 

<!DOCTYPE html>
<html>
<head>
 <!-- 省略 -->
</head>
<body>
<header id="header-container">
 <span>ヘッダー</span>
</header>
<nav id="navigation-container">
 <span>ナビゲーション</span>
</nav>
<div id="contents-area">
 <main id="main-container">
  <span>メイン</span>
 </main>
 <aside id="side-container">
  <span>サイド</span>
 </aside>
</div>
<footer id="footer-container">
 <span>フッター</span>
</footer>
</body>
</html>

 

body {
 overflow-y: scroll;
 width: 100%;
}
#header-container {
 background-color: #999999;
 height: 180px;
}
#navigation-container {
 background-color: #cccccc;
 height: 60px;
}
#contents-area {
 background-color: #ffff99;
 margin: 0 auto;
 width: 1366px;
}
#main-container {
 background-color: #ff99ff;
 float: left;
 width: 1024px;
}
#side-container {
 background-color: #99ffff;
 float: left;
 width: 342px;
}
#footer-container {
 background-color: #999999;
 clear: both;
 width: 100%;
 height: 60px;
}

※実際はこのCSSを読み込む前に、ノーマライズCSSを適用しています。

 

JavaScriptコード

<script>
var window_h = window.innerHeight;
//ツールバー等を除いたブラウザウィンドウの高さを取得
console.log(window_h);
//コンソールログに取得したブラウザウィンドウの高さを表示※チェック用
var header_h = document.getElementById('header-container').offsetHeight;
var navigation_h = document.getElementById('navigation-container').offsetHeight;
var main_h = document.getElementById('main-container').offsetHeight;
var side_h = document.getElementById('side-container').offsetHeight;
var footer_h = document.getElementById('footer-container').offsetHeight; 
//各ボックスの高さを取得※offsetHeightで取得するのはpadding,border含めた値
var sub = window_h - (header_h + navigation_h + footer_h);
//取得したブラウザウィンドウの高さから、ヘッダーボックス、ナビゲーションボックス、フッターボックスの高さを引き算し、コンテンツエリアの高さを算出
if (sub > main_h && sub > side_h) {
 document.getElementById('contents-area').style.height = ((window_h - (header_h + navigation_h + footer_h)) + 'px');
}
//メインボックス、サイドボックスの高さが、いずれもコンテンツエリアの高さに満たない場合、コンテンツボックスの高さを押し広げる
</script>

※ヘッダーには#header-container、フッターには#footer-containerといったようにID名を振っています。また、メインボックスとサイドボックスを覆っているコンテンツエリアは#contents-areaというID名になっています。

 

 

確認

 

コンソールログを開発者ツールで確認

コンソールログ出力は、ブラウザには表示されない開発者ツール(Google Chromeのデベロッパーツール等)で確認出来るデバッグ用出力です。

 

ブラウザウィンドウの高さ974pxから、ヘッダー+ナビゲーション+フッターボックスの高さ計300pxを引くと674px。

メインボックスとサイドボックスの高さがいずれも674px以下の場合、コンテンツボックスの高さが674pxとなり、ちょうどヘッダーが一番下に固定される形で表示されます。

試しにメインボックスに高さ600pxを設定してみます。

 

コンテンツボックスが広がった

600pxではウィンドウサイズに余りが出るので、フッターを一番下に配置するようにコンテンツボックスの高さが設定されます。

 

フッターが少し浮き上がった状態

ちなみにJavaScriptを無効にすると、コンテンツボックスの高さは0のままなので、フッターが浮き上がった状態になります。

 

 

まとめ

 

冒頭にも書いた通り、この記事で紹介したやり方はかなり強引で実用性があるとは言えません。

今回の例で言えば、最初からメインボックスにある程度の高さ(min-height)を設定しておけばそれで済む話ですし。自分が作成するオリジナルテーマもそのようにするつもりです。

しかし、何かしらに応用出来そうな知識ではあると思うので、とりあえず記事にして残しておきたかったというわけです。

 

||

サイトのコンテンツが足りずフッターが浮き上がってしまう問題の対処法(JavaScript編)

0件のコメント

コメント

カテゴリ

月別アーカイブ