こんにちは、モモコです。 ページを作っている際に、想定していたコンテンツ量よりも原稿が短く、フッターの下にブラウザとの隙間が空いてしまう事がありました。 このスカスカ感を埋めるべく、フッターをウィンドウ下部に固定する方法を調べたので備忘録も兼ねてご紹介します。 positionを使い、フッターをコンテンツ下部に固定する方法 【HTML】 <html lang="ja"> <body> <div id="wrap"> <header>ヘッダー</header> <div id="contents">コンテンツ</div><!-- contents --> <footer id="footer">フッター</footer> </div><!-- wrap --> </body> </html> 【css】 html,body{ height:100%; } #wrap{ width: 100%
![★★★隙間を埋める!フッターをウィンドウ下部に固定する3つの方法 | 株式会社LIG](https://cdn-ak-scissors.b.st-hatena.com/image/square/b1987e7f9151dd849c15add895af0cf087a5d9e9/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2012%2F07%2Fshoes1.jpg)