◁ 一覧へ戻る

IE 最後の対応

今更ですが、おいらが最後の最後に遭遇した IE 固有バグの対処法を載せておきます。笑

ヘッダー + コンテンツ + フッターがあるページで、真ん中のコンテンツの高さが足りないとフッターが上に上がっちゃうので、定石としての対応法があります。例えばこんな感じ。

body {
margin: 0;
display: flex;
flex-flow: column;
min-height: 100vh;
}
.entry-content {
flex: 1;
}

簡単に言うと、真ん中のコンテンツの最低高さを 100vh にしとけって意味ですね。
この flex-flow: column; が IE 効かないんですよ。min-height が 0 と扱われる?フッターがだだ上がりしちゃうようです。
なのでハックがありました。

body {
margin: 0;
display: flex;
flex-flow: column;
min-height: 0%;
}
.entry-content {
flex: 1 auto;
}

min-height を 0% にし、flex 1 に auto を追加。これでOK?

たまたま15日にクライアントさんから指摘があり、対応したというね。
明日からは知らんがなですが、本日は対応しておきます!って。笑 こんなんばっかのこの10数年でした。
これで本当に不毛な時間とおさらばです。「あぁ、こんなに嬉しいことは無い」by アムロレイって感じです!

« »