Я просматривал все решения min-height: 100% на StackOverflow и в Интернете, и я не могу найти тот, который соответствует моим (относительно простым) потребностям.
Вот что я хочу:
Пример кода:
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 почитать мою минимальную высоту?
Как сделать этот макет работой?
Вот исправление:
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/
Существует другое решение этой проблемы.
В вашем случае вы можете использовать псевдоэлемент для растягивания строки:
Прежде всего используйте 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
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;
}
См. рабочую демонстрацию .
Наличие дочерних элементов вашего элемента 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 */
}
EDIT: Ответ Томаса показывает способ достижения желаемого без использования min-height, что означает, что он отлично работает в IE.
Я решил решить эту проблему с помощью Javascript, хотя я признаю это абсолютно неприятным кодом и довольно реалистичным решением. Всякий раз, когда мой основной элемент содержимого изменяется в размере, я отключу свойство height, измеряю контейнер, чтобы решить, действительно ли свойство высоты необходимо, а затем при необходимости замените его. Как будто я написал свою собственную реализацию min-height. Существенным недостатком этого подхода является то, что IE не дает правильных событий, когда элементы меняют размер или когда контент изменяется внутри элемента, и без этих событий вам нужно использовать таймер setInterval и самостоятельно измерять элемент. Гросс.
В дополнение к моему собственному решению, я говорил с людьми в команде IE, которые работают на flexbox. Они признали, что ошибка все еще существует в производстве сегодня, но все же побудила меня найти способ исправить ее без JS. Единственное, что они дали мне, это использовать IE-специфический - ms-grid layout. Я не знаком с ними, но я отчитаюсь и обновляю этот ответ, если у меня будет время для расследования.
ИСПОЛЬЗОВАТЬ height: 100% для IE
IE будет игнорировать свойство min-height здесь, но chrome выберет его.
Я не уверен в причине, но надеюсь, что все будет хорошо.
.container {
display: flex;
align-items: stretch;
height: 100%;
min-height:100%;
}
Codepen