CSS(Flexbox)だけでフッターを最下部に固定する方法
コンテンツ量が少ない時でもフッターを最下部に固定する方法です。
以下がHTML・CSSの内容です。
index.html
<body>
<header>
ヘッダー
</header>
<main>
コンテンツ
</main>
<footer>
フッター
</footer>
</body>
style.css
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
"min-height: 100vh;"とすることで、bodyの表示領域が確保されます。
そして"flex: 1;"により、bodyタグ内のheaderタグとfooterタグの高さを除いた部分が、mainタグで埋まるようになります。
これだけでフッターを最下部に固定できます。
補足 - IE11対策
上記の方法だと、IE11環境でコンテンツ内の画像をレスポンシブ対応した場合、フッターの上部に高さが残り余白が生まれてしまいます。
以下のように、mainタグに"min-height: 1px"を指定すると解消されます。
style.css
main {
flex: 1;
min-height: 1px;
}
Author And Source
この問題について(CSS(Flexbox)だけでフッターを最下部に固定する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/ryonextStandard/items/0fa9a32ed6e7899a27fc著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .