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

1 フッターを最下部に固定する
- 1.1 SAMPLE
- 1.2 フッターの下の余白はベつに変じゃない

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

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

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にフッターと同じ高さを指定することで、画面を縦に狭めたときに中身がフッターで隠れないようにしています。