web-dev-qa-db-ja.com

IE11でA Flexbox StickyFooterを修正するにはどうすればよいですか

フレックスボックスを使用してスティッキーフッターを作成しました。 IE11以外のすべてのブラウザで動作します。

Codepen

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.Page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.Page-header {
  background: blue;
}

.Page-footer {
  background: green;
}

.Page-body {
  background: red;
  flex: 1;
}
<div class="Page">
  <header class="Page-header">
    HEADER
  </header>
  <div class="Page-body">
    BODY
  </div>
  <footer class="Page-footer">
    FOOTER
  </footer>
</div>

IE11で壊れているのはなぜですか？どうすれば修正できますか？

htmlcssinternet-explorerflexboxsticky-footer
14
Undistraction

試してみてください

flex: 1 0 auto;

コンテンツブロック用

30
Timofey Orischenko

問題は、IE11ではflexboxはmin-heightを尊重しないため、フレックスボックスはその内容の高さまで折りたたまれます。

flexboxを別のflexboxで、flex-direction: columnも含む）でラップすることで修正できます。また、flex: 1をオンに設定する必要があります。元のフレックスボックス。何らかの理由で、ネストされたflexboxは、そのmin-heightを尊重します。

Codepen

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.Wrapper {
  display: flex;
  flex-direction: column;
}

.Page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.Page-header {
  background: blue;
}

.Page-footer {
  background: green;
}

.Page-body {
  background: red;
  flex: 1;
}
<div class="Wrapper">
  <div class="Page">
    <header class="Page-header">
      HEADER
    </header>
    <div class="Page-body">
      BODY
    </div>
    <footer class="Page-footer">
      FOOTER
    </footer>
  </div>
</div>
12
Undistraction

本体のmin-heightをheightに変更するというflexbugの推奨事項 を使用して回避しました。

特定の状況でのみ機能します。スティッキーフッターは一般的な使用例の1つであるようです。

3
Nacht - Reinstate Monica