CSSで内容が少ない場合でもフッターを画面最下部に表示するその2
CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。
以前にも紹介しましたが、今回は別の方法です。
HTMLの設定
<html>
<head>
<metal name=”viewport” content=”width=device-width,initial-scale=1″ />
</head>
<body>
<div class=”wrapper”>
<div class=”container”>
<p>内容</p>
</div>
<div class=”footer”>
フッター
</div>
</div>
</body>
</html>
CSSの設定
*{
box-sizing:border-box;
}
html,body{
height:100%;
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
}
.wrapper{
display:flex;
flex-direction:column;
min-height:100%;
}
.container{
padding:10px;
}
.footer{
margin-top:auto;
padding:20px 0;
background-color:#ccc;
}
その他
.wrapperなどでmin-height:100%としていますが、ここを100vhにするとよい、という記述もウェブでは見られます。
私の場合、スマホで表示したさいに、単位にvhを使うと、ブラウザのURLを表示するバーの分を加味してくれないので、バーの分だけは下にスクロール余地が生まれてしまいました。
単位を%にしたら解消されたので、ひとまず%表示にしています。
関連記事