Flexboxを使って、サイトの中身が少ないときにでも、フッターを下部にさせる方法をネットで調べてみて試してみたところ、Chromeではうまくいったのですが、IEで確認してみると表示がうまくされませんでした。
Chromeではちゃんと表示できるのですが、IEでは崩れて表示されます…
フッターが重なってしまってますね。
そのときのコードはこちら。
<html>
<body>
<header>Header</header>
<div class="main">Main</div>
<footer>Footer</div>
</body>
</html>body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1;
}コードの簡単な説明としては、display: flex;で横並びにしたものをflex-direction: column;で縦に並び替えています。そして、min-height: 100vh;とし、伸縮させたいところにflex: 1;を書いています。
どうしてうまくいかないのかと再びネットでいろいろと調べていじってみたら、何とか表示させることができたので、私が忘れないうちに書いておきます。
IEでもフッター下部に表示させるコードの書き方
<html>
<body>
<div class="wrapper">
<header>Header</header>
<div class="main">Main</div>
<footer>Footer</div>
</div>
</body>
</html>body {
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1 1 auto;
}wrapperを使ってかぶせてあげて、display: flex;を二重に書くことがポイントです。無駄な書き方になってしまうかもしれませんが、
wrapperを使わずbodyのみに書いていると、IEではmin-heightがうまく働かずフッターを下部に表示させることができません。解決のヒントになったのがこの記事。
flexboxのバグに立ち向かう（flexboxバグまとめ）
もうひとつのポイントとしては、IEではflexを短縮して書かないということです。
短縮して書いていると、ChromeとIEでは表示の結果が違うことがありましたので、注意したほうが良いかもしれません。
かぶせてあげればいいということは、wrapperを使わなくてもhtmlに書いてあげればうまくいくかもしれませんね。
html {
display: flex;
flex-direction: column;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1 1 auto;
}試してみたところ、こちらでもちゃんと表示することができました。
最後にひとこと
これが正しい解決方法なのかは分かりませんが、IEでうまくいかなかったときに参考にしてみてください。私もただいま、Flexbox勉強中です！