Подтвердить что ты не робот

Internet Explorer не соблюдает мою минимальную высоту: 100% с помощью flexbox

Я просматривал все решения min-height: 100% на StackOverflow и в Интернете, и я не могу найти тот, который соответствует моим (относительно простым) потребностям.

Вот что я хочу:

  • У меня есть контейнер с двумя столбцами, и оба столбца должны быть равны по высоте.
  • Когда содержимое не заполняет экран, столбцы должны растягиваться до полной высоты окна.
  • Я рад использовать flex-box, но я бы предпочел не использовать JS-хаки, если это возможно.

Пример кода:

http://codepen.io/anon/pen/dwgDq?editors=110

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="nav">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
      </div>
      <div class="content">
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
        <p>Content 4</p>
        <p>Content 5</p>
        <p>Content 6</p>
        <p>Content 7</p>
        <p>Content 8</p>
      </div>
    </div>
  </body>
</html>

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

.wrapper {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.container {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.nav {
  background: grey;
  width: 200px;
}

.content {
  flex-grow: 1;
  background: yellow;
}

Это отлично работает в Safari и Chrome.

Кажется, что IE (v11 в моем случае) не соблюдает мою минимальную высоту, и, таким образом, столбцы не заполняют высоту экрана. Из того, что я читал, у IE6 + 7 были проблемы с обработкой высоты в виде минимальной высоты, но это реликвия прошлого и давно ушла при использовании документа типа HTML5.

Как заставить IE почитать мою минимальную высоту?

Как сделать этот макет работой?

4b9b3361

ОТВЕТЫ

Ответ 1

Вот исправление:

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
}

jsfiddle: http://jsfiddle.net/d5syw3dc/

Ответ 2

Существует другое решение этой проблемы.

В вашем случае вы можете использовать псевдоэлемент для растягивания строки:

Прежде всего используйте 100vh вместо 100%

.container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

После этого просто добавьте псевдоэлемент в .container с точно значением той же высоты

.container::after{
  content: '';
  height: 100vh;
  visibility: hidden;
}

Здесь, см. мой код http://codepen.io/anon/pen/LVazgQ

Ответ 3

min-height не работает в IE10/11, когда он связан с гибким макетом (проверьте отчет об ошибке ). Для исправления используйте другой гибкий контейнер.

Изменить: Просто выяснилось, что я не отвечал на исходный пост, введенный в заблуждение от ответного ответа. Итак, идем:

Раскладка двух столбцов

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
</div>

CSS

.ie-fixMinHeight{
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
}

#content {
    flex-grow:1;
}

Не используйте макет flexbox непосредственно на body, потому что он закручивает элементы, вставленные через плагины jQuery (автозаполнение, всплывающее окно и т.д.).

Здесь фиксированный макет на основе вашего кода.

Липкий нижний колонтитул

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

См. рабочую демонстрацию .

Ответ 4

Наличие дочерних элементов вашего элемента display: flex, наследующего минимальную высоту, было быстрым решением для меня в IE, без добавления каких-либо дополнительных элементов. Он также работает, как ожидается, с переполнением.

HTML:

<div class="container">
  <div class="col-1">Col 1</div>
  <div class="col-2">Col 2</div>
</div>

CSS

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  min-height: inherit; /* or 100vh or whatever you want */
  display: flex;
}
.container > * {
  min-height: inherit; /* use the full height of the container, works with overflow */
}

.col-1 {
  background: red;
  flex-grow: 1; /* half the screen width */
}
.col-2 {
  background: blue;
  flex-grow: 1; /* half the screen width */
}

Ответ 5

EDIT: Ответ Томаса показывает способ достижения желаемого без использования min-height, что означает, что он отлично работает в IE.

Я решил решить эту проблему с помощью Javascript, хотя я признаю это абсолютно неприятным кодом и довольно реалистичным решением. Всякий раз, когда мой основной элемент содержимого изменяется в размере, я отключу свойство height, измеряю контейнер, чтобы решить, действительно ли свойство высоты необходимо, а затем при необходимости замените его. Как будто я написал свою собственную реализацию min-height. Существенным недостатком этого подхода является то, что IE не дает правильных событий, когда элементы меняют размер или когда контент изменяется внутри элемента, и без этих событий вам нужно использовать таймер setInterval и самостоятельно измерять элемент. Гросс.

В дополнение к моему собственному решению, я говорил с людьми в команде IE, которые работают на flexbox. Они признали, что ошибка все еще существует в производстве сегодня, но все же побудила меня найти способ исправить ее без JS. Единственное, что они дали мне, это использовать IE-специфический - ms-grid layout. Я не знаком с ними, но я отчитаюсь и обновляю этот ответ, если у меня будет время для расследования.

Ответ 6

ИСПОЛЬЗОВАТЬ height: 100% для IE

IE будет игнорировать свойство min-height здесь, но chrome выберет его.

Я не уверен в причине, но надеюсь, что все будет хорошо.

.container {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height:100%;
}

Codepen

http://codepen.io/anon/pen/KDJjC