IEでもFlexboxを使ってフッターを下部に表示させる

Flexboxを使って、サイトの中身が少ないときにでも、フッターを下部にさせる方法をネットで調べてみて試してみたところ、Chromeではうまくいったのですが、IEで確認してみると表示がうまくされませんでした。

Chromeではちゃんと表示できるのですが、IEでは崩れて表示されます…

Chromeでの表示結果
Chromeでの表示結果
IEでの表示結果
IEでの表示結果

フッターが重なってしまってますね。

そのときのコードはこちら。

HTML
<html>
<body>

<header>Header</header>
<div class="main">Main</div>
<footer>Footer</div>

</body>
</html>
CSS
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1;
}

コードの簡単な説明としては、display: flex;で横並びにしたものをflex-direction: column;で縦に並び替えています。そして、min-height: 100vh;とし、伸縮させたいところにflex: 1;を書いています。

どうしてうまくいかないのかと再びネットでいろいろと調べていじってみたら、何とか表示させることができたので、私が忘れないうちに書いておきます。

IEでもフッター下部に表示させるコードの書き方

HTML
<html>
<body>

<div class="wrapper">
  <header>Header</header>
  <div class="main">Main</div>
  <footer>Footer</div>
</div>

</body>
</html>
CSS
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に書いてあげればうまくいくかもしれませんね。

CSS
html {
  display: flex;
  flex-direction: column;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1 1 auto;
}

試してみたところ、こちらでもちゃんと表示することができました。

最後にひとこと

これが正しい解決方法なのかは分かりませんが、IEでうまくいかなかったときに参考にしてみてください。

私もただいま、Flexbox勉強中です!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です