Как сделать липкий нижний колонтитул с помощью flexbox в IE11?

Я пытаюсь сделать простой дизайн с 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>

Ответы

Ответ 1

IE имеет ошибку min-height и нуждается в display: flex в родительских контейнерах столбцов 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>

Ответ 2

В 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.

Дополнительная информация:

свойство flex не работает в IE

Ответ 3

Решение, которое действительно помогло мне (может быть, применимо не во всех случаях), заключается в добавлении произвольной фиксированной высоты в пикселях - минимальная высота переопределяет фиксированную высоту, поэтому отсутствует обрезанное содержимое. Вот пример 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;
}

Ответ 4

Так как это может быть желательным решением: если вы не хотите увеличивать 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>

Ответ 5

Этот ответ (@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;
  }
}

Ответ 6

Лучшее кросс-браузерное решение, которое я нашел с наименьшим количеством ошибок:

/**
 * 1. Avoid the IE 10-11 'min-height' bug.
 * 2. Set 'flex-shrink' to '0' to prevent Chrome, Opera, and Safari from
 *    letting these items shrink to smaller than their content default
 *    minimum size.
 */
.Site {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 1 */
}
.Site-header,
.Site-footer {
  flex-shrink: 0; /* 2 */
}
.Site-content {
  flex: 1 0 auto; /* 2 */
}

<body class="Site">
  <header class="Site-header">…</header>
  <main class="Site-content">…</main>
  <footer class="Site-footer">…</footer>
</body>