• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

コンテンツの高さが足らなくてもフッターを最下部の底辺に!

投稿者アイコン

2011/04/24

書いた人:
futappa_staff
カテゴリ:
CSS   Web制作
66,068 views

コンテンツの高さが足りないとき、フッターが浮いてしまう。。。そんなフッターを最下部に固定したいときのコーディング方法をご紹介します!

NOIMAGE


コンテンツの高さが足りないけど、フッターを最下部に固定したい!

ヘッダー・コンテンツ・フッターと作って、コーディングしたとき、コンテンツの内容が少ないページの場合、コンテンツの高さが足らなさすぎて、ブラウザの底辺とフッターの間にスキマができてしまいます。
footdown
これフッター一番下きてほしいんやけどどうしよう・・・。って悩んでる方に!解決法CSSをご紹介!
まず、解答済みのデモページをご覧ください!
ブラウザの高さをグリグリ動かして見ても、フッターがつねに底辺に付いていきます!
レイアウトのHTML内容はこのようになってます。
(ヘッダーは今回の問題については特にいりませんが。)
<div id="container">
    <div id="header">ヘッダー</div>
    <div id="main">メインコンテンツ</div>
    <div id="footer">フッター</div>
</div>
で肝心の解決するためのCSSはどうすれば良いかというと、
/*----- 基本設定 -----*/
div#container{
    width: 850px;
    margin: 0 auto;
}
/*----- ここからが重要なフッター下部設定 -----*/
html,body{
    height: 100%;
}
div#container{
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
div#main{
    padding-bottom: 50px
}
div#footer{
    position: absolute
    bottom: 0
    width: 100%
    height: 50px
}
わかりました?
わかんねぇよ!って方に重要部分を解説付きに書き換え!ぽぽぽぽ~~ん!!
/*----- ここからが重要なフッター下部設定 -----*/
html,body{
    height: 100%;   /* ブラウザ画面の高さをめいっぱいに使用するよ */
                    /* こうしないと、htmlとbody要素は内包しているコンテンツの部分までしか高さが出ません*/
}
div#container{
    position: relative;      /* フッターを位置指定するための基準設定を、まずフッターの親に書くよ */
    min-height: 100%;        /* 全部囲ってるdiv#containerは、”最低でも”高さ100%(=ブラウザ画面めいっぱい)にしてね */
                             /* min-heightは最低限の高さを指定するプロパティ。コンテンツ量が増えれば、高さは伸びるよ */
    height: auto !important; /* IE6じゃmin-height使えないからIE6専用にこの行と次の行をこう書くよ */
    height: 100%
}
div#main{
    padding-bottom:50px; /* 高さ50pxのフッターだから、その分空けてあげて */
}
div#footer{
    position: absolute;  /* フッターを絶対配置に指定する設定 */
    bottom: 0;           /* フッターを一番下に置くぜ! */
    width: 100%
    height: 50px;        /* フッターの高さ */
}
という感じで!これ以上簡単解説、、、というのは難しいので、とりあえず、こういう問題に出くわしたらやってみてください!!
ではまた来週!

この記事を読んだ人はこんな記事も読んでいます

<

>