【CSS】高さ可変Footerの下部固定【備忘録】

css

レスポンシブ対応することでfooterの内容が改行した、等によって高さが固定しない場合、footerを最下部に表示する。
※普段から適用するようにしておけば楽なのかも。

html

<body>
<div class="content">
コンテンツ
</div>
<footer class="footer">フッタ</footer>
</body>

css


html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
/* IE10、11でmin-heightのバグがあるため、使用を避ける*/
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}

◆check
.contentに「flex-direction:column」を指定して縦並びに。

参考

https://coliss.com/articles/build-websites/operation/css/css-sticky-footer.html
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

コメント