web-dev-qa-db-ja.com

IE11でflexboxを使用してスティッキーフッターを作成する方法は？

flexboxを使用してシンプルなデザインを作成しようとしていますが、IE11で問題が発生しています。 Chromeのようにこれを実行しても問題ありません：

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

<p>main</p>の数で遊ぶだけで、IE11の間違った動作を確認できます。

JavaScriptなしでこれを達成する方法はありますか？

htmlcssflexboxinternet-explorer-11
16
ssougnez

IEにはmin-heightバグとニーズdisplay: flexフレックス列コンテナの親、この場合はhtml

フィドルデモ

このようにCSSを更新します

*,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>
28
LGSon

mainでは、flex: 1の代わりにflex: autoを使用します。必要なのはこれだけです。

flex: 1略記規則は、以下に分類されます。

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

flex: auto略記規則は、以下に分類されます。

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

IEはflex-basis: 0の解析に問題があります。

詳しくは：

8
Michael_B

私を本当に助けたソリューションは（すべての場合に適用できるわけではない）、ピクセル単位の任意の固定高さを追加することです-最小高さは固定高さをオーバーライドするため、コンテンツがトリミングされません。 CSSの例を次に示します。

.fullheight {
    min-height: 100vh;
    height: 200px; /*IE 11 flexbox min-height fix*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
7
ceindeg

これは望ましい解決策かもしれないので：必ずしもmainタグを大きくしたくないが、フッターを下に揃える場合：

html, body {
  margin: 0;
  display: flex;
}
html {
  height: 100%;
}
body {
  flex-flow: column nowrap;
  flex-grow: 1;
}
footer {
  margin-top: auto;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>
0
Simon

この回答（ @ ceindeg answer ）は部分的には機能しましたが、親コンテナのサイズを縮小し、下部に配置したい背景がありました。

だから、私はちょうどフッターのposition: absoluteに行きましたIEののみ。

IEでのみメディアクエリを使用できるため、他のブラウザは正常に動作します（ここをご覧ください： スタイルシート内のIE（任意のバージョン）のみをターゲットにする方法は？ ）。

私の場合、IE10とIE11を目指したいので、これを使用しました。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  footer {
   position: absolute;
   bottom: 0;
  }


  .parent-container {
    position: relative
    // Add some padding-bottom to the parent container so it won't be glued together
    padding-bottom: 30px;
  }
}
0
jpenna