Flexbox, min-высота и 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>

просто играть с номером <p>main</p> чтобы увидеть неправильное поведение с IE11.

есть ли способ достичь этого без JavaScript?

9
css css3 flexbox html

3 ответов

IE имеет min-height ошибки и должен display: flex на родительском контейнере flex column containers, в этом случае 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>
14

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

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

5

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

}

1