vsIE（flexboxとmin-height編）

11076 ワード
フロントエンド HTML 備忘録 IE CSS HTML テキストリンク

はじめに

以前コーディング案件にアサインしたのですが、そこでIEにめちゃくちゃに苦しめられたので、今後の私の為を思って備忘録として残していきたいと思います。
ということでまずは「flexboxとmin-height編」です。
もし他にステキな解決法があれば是非教えてください！！
では！早速！

ヘッダー・メイン・フッターのメインがよしなに伸びん

以下の画像ようなレイアウト、ありますよね。

画面の高さ＞メインコンテンツの高さ（画像のMainの部分）だった場合、ヘッダーとフッターが上と下にぴったりくっつくように、メイン部分が伸びて欲しい。
でもメインコンテンツの高さが画面の高さを超えるようであれば中身合わせてほしい。（わがまま）

こんな感じで。

「こんなの、flexbox使うなり、grid使えば簡単やね＾＾」
知識の浅い私は意気揚々とコーディングを始めました。

index.html
<div class="layout">
  <header class="layout__header">Header</header>
  <main class="layout__main">Main</main>
  <footer class="layout__footer">Footer</footer>
</div>
style.css
.layout {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.layout__header {
  flex: 0 0 100px;
  max-height: 100px;
  background-color: #CBC2C2;
}
.layout__main {
  flex: 1 0 auto;
  background-color: #F7EFEF;
}
.layout__footer {
  flex: 0 0 100px;
  max-height: 100px;
  background-color: #C2C4CB;
}

Chromeで表示すると…

うん。そうそう。簡単ですね。

さて、IEで確認してみt…　

oh…

じゃ、じゃあgrid使うし＾＾；
(※autoprefierでIEでもgrid使えるようにしています。）

style.css
.layout {
  display: -ms-grid;
  display: grid;
  width: 100%;
  min-height: 100vh;
  -ms-grid-rows: 100px 1fr 100px;
  -ms-grid-columns: 1fr;
      grid-template: "header" 100px "main" 1fr "footer" 100px/1fr;
}
.layout__header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: header;
  background-color: #CBC2C2;
}
.layout__main {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: main;
  background-color: #F7EFEF;
}
.layout__footer {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: footer;
  background-color: #C2C4CB;
}

よっしゃ確認しｔ…

～END～

（多少のフィクションを含みます）

原因

min-heightを過信しているのがよくないのか…？と思い調べるとそのようでした。
厳密にはdisplay:flexbox;を指定している要素に対してはmin-heightは言うこと効かないみたいですね…（gridもっぽいです。）
min-height自体は使えるようなので、組み合わせが…って感じでしょうか。
ｼﾗﾅｶｯﾀｰ…
既出のネタっぽいですね…

解決法

どうしようか～と探してたところどんぴしゃり！の神のような記事を見つけました。
とてもありがたい…
flexboxとmin-heightの組み合わせがIE11で効かない

1. min-heightではなくheightを使っちゃう

style.css
.layout {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

若干無理矢理感が強いですが、なんとかIEでもいい感じになってくれました。（画像は省略します。）
なぜ無理矢理感が強いと言ったのかというと、
flexboxをあてた親要素が100vhなのに子要素がそれを超えてた場合…（以下画像参照…といいつつわかりますかね？…）
見た目的にはわからなくとも、気持ち悪いっちゃ―気持ち悪いですね。

2. もう一個外側に親要素を設けて、flexboxをあてる

index.html
<div class="wrapper">
  <div class="layout">
    <header class="layout__header">Header</header>
    <main class="layout__main">Main</main>
    <footer class="layout__footer">Footer</footer>
  </div>
</div>

この<div class="wrapper"></div>にdisplay:flex;をあてるとIEで期待通りのレイアウトになってくれました。ｽｹﾞｰ
（＋<div class="layout"></div>にflex: 1 0 100%;もあててます。）

まとめ

今回は結構ページが出来上がってる状態でこの事象に気がついてしまったので、
反映の手間等を考慮して1の方法で乗り切りましたが、2の方が美しい気がします。
めんどくさかったわけじゃないです。()
これは愚痴ですが、毎回「できた！！！よし他のブラウザでも確認！」と意気込んでIEをみるととんでもない崩れ方をしているときがあって泣きながら修正しています。ﾂﾗｧｲ。
まだまだですね…
今後のワタシに言えることはひとつ。こまめにIEをチェックするんやで。あとSafariも。

参考にしたサイト

とても助かりました。