【HTML&CSS】フッターの下に余白ができないようにする

フッターを最下部に固定する

閲覧する画面の縦の大きさに対してページのコンテンツが少ない時、フッターを最下部に固定して余白が出来ないようにする方法をメモします。

SAMPLE

HTML

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>footer-fixx</title> <link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=”wrapper”>
    <header class=”header”>
        header
    </header>
    <main>
        <section class=”content”>
            <h1>content</h1>
        </section>
    </main>
    <footer class=”footer”>footer</footer>
</div>
</body> 
</html>

CSS

@charset "UTF-8";
/*デフォルトマージンを除去*/
*{
  margin:0;
  padding: 0;
}
 
html, body {
  height: 100%;
}

#wrapper {
  width: 100%;
  position:relative;
  min-height: 100%;
}

.header {
  width:100%;
  height:100px;
}

.content {
  padding-bottom: 100px;
}

.footer {
  width:100%;
  height: 100px;
  position: absolute;
  bottom: 0;
}

htmlとbodyのheightを100%と指定することで
コンテンツの内容に合わせて画面の高さが伸びていきます。

フッターの親要素div#wrapperブロックのpositionをrelative、フッター自身をabsoluteとし、bottom:0 で最下部に指定します。

これで、フッターがページの最下部に固定され、大きい画面で見ても余白が出来ません。

ヘッダー、フッターに挟まれたコンテンツ領域(SAMPLEでは.contentクラスを指定)のpadding-bottomにフッターと同じ高さを指定することで、画面を縦に狭めたときに中身がフッターで隠れないようにしています。

フッターの下の余白はベつに変じゃない

コンテンツの少ないページでフッターの下に余白が出来ているサイトは一般的に結構あります。

例えば、お問い合わせフォームやアクセス情報など、掲載する情報が限られたページなどがそれに該当しますが、余白が出来ていても特におかしくはないと思います。

むしろ情報量の少ないページでフッターを固定すると、今度は当然コンテンツとフッターの間に無駄な余白が出来るので、
あくまで好みの問題でしかないと思いますので、無理に今回紹介したような手法を適用する必要はないかと思います。

Follow me!