おまけ　コーディングの基礎「内容量に左右されないでフッターをウインドウ下に表示!?」

2008年11月3日
WEB

第3回　コーディングの基礎　「CSSレイアウトの基礎 2カラムをやってみよう」のときに文章量が少なかった場合の表示がちょっと気になりました。
文章量が少なかった場合
文章量が少なかろうと、フッターを下に表示したい。これをどうやって解決するか。解決策は、私の場合、2種類使っています。

フッターが下まであるように見せる
文章量が少ないときにはフッターを下に追いやる

フッターが下まであるように見せる

cssに書いてあるコンテンツの両側にborderのついた横幅800pxのフッター背景画像を作り、横位置中央、y方向にリピートするbodyの背景として貼り付けると、あたかも下にもフッターが続いているかのように見えます。

body {
background: url(../images/bg_footer.gif) repeat-y center;//フッター画像をbodyに指定する
color: #888;
font-family: “Lucida Grande”,’メイリオ’,Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳＰゴシック”,Osaka, sans-serif;
text-align: center;
}
#footer { //background指定を削除
padding: 8px 20px;
}

サンプルページ

文章量が少ないときにはフッターを下に追いやる

フッターに高さを指定（例：height: 100px;）、コンテンツ部分にフッターの入る場所を作る（例：margin-bottom: -100px;）ので、wrapper、wrapの中をさらに、「上」と「下」に分ける必要あります。この上下を包むブロック要素をheight100%に指定します。
上(id=height)：ヘッダー、コンテンツを含む
下（id=low）：フッターを含む

<div id=”wrap”>
　　<div id=”wrapper”>
　　　　<div id=”high”>
　　　　　　<div id=”header”>
　　　　　　　　<h1><a href=”index.html”>見出しレベル1</a></h1>
　　　　　　</div>
　　　　<hr />
　　　　　　<div id=”content” class=”clearfix”>
　　　　　　　　<div id=”sidebar”>
　　　　　　　　　　<ul id=”glovalnavi”>
　　　　　　　　　　　　<li class=”first-child”><a href=”#”>グロバルナビ1</a></li>
　　　　　　　　　　　　<li><a href=”#”>グロバルナビ2</a></li>
　　　　　　　　　　　　<li><a href=”#”>グロバルナビ3</a></li>
　　　　　　　　　　　　<li><a href=”#”>グロバルナビ4</a></li>
　　　　　　　　　　　　<li class=”last-child”><a href=”#”>グロバルナビ5</a></li>
　　　　　　　　　　</ul>
　　　　　　　　　　<hr />
　　　　　　　　　　<ul id=”banner”>
　　　　　　　　　　　　<li><a href=”#”><img src=”images/banner_ff.jpg” alt=”FireFox” width=”127″ height=”127″ /></a></li>
　　　　　　　　　　　　<li><a href=”#”><img src=”images/banner_op.jpg” alt=”Opera” width=”125″ height=”125″ /></a></li>
　　　　　　　　　　</ul>
　　　　　　　　</div>
　　　　　　<hr />
　　　　　　　　<div id=”content_inner”>
　　　　　　　　　　<div id=”main_content”>
　　　　　　　　　　　　<h2>見出しレベル2</h2>
　　　　　　　　　　　　<p>テキストが入ります。テキストが入ります。テキストが入る、入れば、入るときは。楽しいテキストが入ります。テキストが入ります。テキストが入ります。テキストが入る、入れば、入るときは。楽しいテキストが入ります。</p>
　　　　　　　　　　　　<p>テキストが入ります。テキストが入ります。テキストが入る、入れば、入るときは。楽しいテキストが入ります。</p>
　　　　　　　　　　　　<h3>見出しレベル3</h3>
　　　　　　　　　　　　<p>テキストが入ります。テキストが入ります。テキストが入る、入れば、入るときは。楽しいテキストが入ります。テキストが入ります。テキストが入ります。テキストが入る、入れば、入るときは。楽しいテキストが入ります。</p>
　　　　　　　　　　　　<p>テキストが入ります。テキストが入ります。テキストが入る、入れば、入るときは。楽しいテキストが入ります。</p>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　<hr />
　　　　<div id=”low”>
　　　　　　<div id=”footer”>
　　　　　　　　<address>著作権に関する記述</address>
　　　　　　</div>
　　　　</div>
　　</div>
</div>

このようにhtmlに書き加えたら、highとlowよりも外側を包む領域（html、body、wrapeer、wrap）をheight:100%;指定をし、highにlowを乗せる場所を作り、lowにネガティブマージンを指定します。

html {
height: 100%;
text-align: center;
overflow-y:scroll;
}
body {
color: #888;
height: 100%;
font-family: “Lucida Grande”,’メイリオ’,Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳＰゴシック”,Osaka, sans-serif;
}
#wrap {
background: url(../images/bg_body.gif) repeat-y left;
height: 100%;
margin: 0 auto;
text-align: left;
width: 800px;
}
#wrapper {
height: 100%;
border-right: 1px solid #cad9b8;
border-left: 1px solid #cad9b8;
}
#high {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -3em; //下にネガティブマージン
}
#low {
background-image: url(../images/bg_footer.gif); //footer背景をコチラに指定
height: 3em; //高さを3文字分指定
}

サンプルページ
この方法の場合、フッター部分の高さを指定することになりますので、CMSを使っていてフッターの内容が変化するようなサイトには不適ですし、そもそも高さを指定すること自体を私は好んでいません。文字数で高さを指定すれば崩れることが少なくなりますが…

以上で全8回コーディングの基礎を終了します。
途中「グローバルメニュー」あたりで、IE6でのチェック不足で表示がおかしい箇所があり、記事に若干の修正が入りました。大変失礼いたしました。ブラウザチェックが不足するとこのようなことになりかねないので、作ったものをいろいろな環境で眺めて見るようにしましょう。意外なところで表示差が生じている場合があるもんです。

ちなみにこのブログも調子悪い箇所がいくつかあることはわかっています。サイドの動くメニューや記事タイトル周り。フォントメイリオが入っていない環境でのチェックや、文字サイズを小さくしたり、大きくしたりすると、正しく表示していません。ちょっとずつ直していきますので、温かく見守ってやってください。

このページの先頭へ戻る