it-swarm.com.ru

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

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

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

  1. У меня есть контейнер с двумя столбцами, и оба столбца должны растягиваться до одинаковой высоты.
  2. Когда содержимое не заполняет экран, столбцы должны растягиваться до полной высоты окна.
  3. Я счастлив использовать 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 соблюдать мой минимальный рост?

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

16
Brent Traut

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

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/

18
Thomas

Есть другое решение этой проблемы.

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

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

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

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

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

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

5
Xopoc

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;
}

Смотрите рабочий демо .

1
BeliG

Чтобы потомки вашего элемента display: flex наследовали min-height, это было для меня быстрым решением в 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 */
}
1
dudasaus

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


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

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

0
Brent Traut