Flexboxを使って、サイトの中身が少ないときにでも、フッターを下部にさせる方法をネットで調べてみて試してみたところ、Chromeではうまくいったのですが、IEで確認してみると表示がうまくされませんでした。
Chromeではちゃんと表示できるのですが、IEでは崩れて表示されます…
![Chromeでの表示結果](http://yochix2.com/wp-content/uploads/2016/09/chrome-stickyfooter.png)
フッターが重なってしまってますね。
そのときのコードはこちら。
<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勉強中です!