CSS:flexboxでフッターを最下部固定(IE11対応)

In: Web Design, デザイン, 読み物

レスポンシブWebデザインでフッターの高さを固定できないパターンの場合、flexboxを使用しての最下部固定が1番手軽です。
方法自体は皆さんよく記事にされているのですが、IE11特有のバグがひっそりとあるので注意が必要です。

フッターを最下部固定するために全体をflexboxで囲みますが、IE11で画像をレスポンシブ対応すると高さが残ります。

この現象に言及している記事はとても少なくて、私が見つけたのはこちらのページくらいでした。

参考)IE 11 – image resizing bug? #75
https://github.com/philipwalton/flexbugs/issues/75

2015年の時点で既に取り上げられているようなのですが、未だ改善されていないようです。
Edgeが最近頑張りを見せていますが、2025年くらいまでは対応が必要だと思いますので上記の記事を参考に対応済みのコードが下記です。

See the Pen Sticky footer with flexbox (works in IE11) by Shiho Morisaki (@503design) on CodePen.

min-height: 1px; を入れることで解消されます。

フッター下部に固定するために、htmlとbodyに重ねがけで display: flex; を使用しているのが原因のようです。
参考サイトによると、min-height によってIEに高さを再計算させているのではと推測されています。
なので0pxでは効果がないとのこと。

さらに詳しくは参考サイト先を確認してみてください。

Star Rating

記事はあなたのお役に立てましたか?
もしよろしければ、星5つ満点で評価してください。
評価数:5 /平均点:3.00

12345

1← ★★★★★ →5

Loading...

Share

Contact me...

ご用件(必須)
会社名/団体名
お名前(必須)
メールアドレス(必須)
お問い合わせ内容

お問い合わせありがとうございます。
読み物に関していただいたご質問へのお返事は、基本的にはお約束しておりません…。ご指摘いただいたものに関しては、再調査等を行って記事との関連性を精査し、記事内にてご報告させていただく場合もございます。