Сделайте вложенное растяжение div до 100% оставшейся высоты контейнера

У меня есть разделитель div, который я хочу растянуть, по крайней мере, на всю высоту окна. Если в контейнере div много контента, я хочу, чтобы он растянулся до высоты окна. Это работает.

В контейнере div у меня есть изображение. После/ниже изображения у меня есть второй div. Я хочу, чтобы этот вложенный div растягивался вертикально, чтобы заполнить оставшееся пространство контейнера div. Это не работает.

Я попытался проиллюстрировать проблему в этом изображении. Я хочу, чтобы div растягивался так, как показано в левой части правильного изображения, а не так, как он выглядит на правой стороне правильного изображения.

Ниже приведен мой код. Как вы можете видеть, в этом коде я даже не пытаюсь сделать div под изображением растягиваться вертикально, так как ничего не сработало. "Высота: 100%" не выполняет трюк, так как я определил "100%" как высоту окна по умолчанию, чтобы сделать контейнер div растягиваться, по крайней мере, до высоты окна.

Стиль:

* { 
  margin: 0; padding: 0;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body, html { 
  height: 100%;
}

.container {
  display: block;
  overflow: auto;
  min-height: 100%;
  height: 100%;
  height: auto;
}

.bottom {
  width: 100%;
}

HTML:

<div class="container">

<img  src="image.jpg" width="100%">

<div class="bottom">
LOREM IPSUM
</div>

</div>

Ответ 1

Я потратил слишком много времени, пытаясь понять это, но Джордж у меня есть!

Момент "Эврика" читал другие вопросы, на которых люди спрашивали: "Как я могу это сделать, не используя таблицы?" Разумеется, этот макет легко с таблицами. Но это заставило меня подумать о display:table.

Как это сообщение в блоге прекрасно аргументирует, используя display:table дает вам макеты таблиц без неприятных накладных расходов на разметку в виде компоновки таблиц HTML, позволяя у вас есть семантический код и разные макеты для разных медиа-запросов.

В итоге мне пришлось внести одно изменение в надпись: обложка <div> вокруг изображения. Кроме того, максимальные/минимальные высоты кажутся странными при работе с таблицей : height параметры рассматриваются как предпочтительные высоты с учетом ограничений родительского и дочернего элементы. Таким образом, установка высоты нуля в div display:table-row обертки сделало эту строку подходящей для изображения содержимого точно. Установка высоты на 100% в div содержимого сделало его красивым заполнением пространства между изображением и минимальной высотой родительского контейнера.

Voila!

Конденсация только необходимого кода:

Разметка:

<div class="container">
    <div class="wrapper">
        <img src="http://placekitten.com/600/250" />
    </div>
    <div class="bottom" contentEditable="true">
</div>

CSS

body {
    overflow-y: scroll;
    overflow-x: hidden;
}
body, html {
    height: 100%;
}
.container {
    display: table;
    width: 100%
    height: 100%; /* this will be treated as a Minimum!
                     It will stretch to fit content */
}
div.wrapper{
    display:table-row;
    height:0px; /* take as little as possible, 
                   while still fitting content */
}
img {
    display:table-cell;
    width:100%; /*scale to fit*/
}
.bottom {
    display:table-cell;
    height:100%; /* take as much as possible */
}

Работает в Firefox 25, Chrome 32, Opera 18 и IE10. Не работает в IE 8, но тогда что делает? Он не выглядит сломанным в IE8, он просто не растягивается.

Если вы можете протестировать его в Safari, IE9 или мобильных браузерах, оставьте комментарий.

Ответ 2

Не-javascript способ использовать flexbox. Как точно зависит от большого количества деталей, но вы можете играть в http://the-echoplex.net/flexyboxes/.

Полиполки существуют, но то, что именно нужно использовать, зависит от того, какие браузеры вы нацеливаете.

Ответ 3

Ящики Flex будут хороши, если они будут широко поддерживаться.

Еще лучше было бы изменить спецификацию, чтобы, если вы укажете min-height для родителя, вы можете использовать процентные значения для дочернего объекта min-height вместо того, чтобы требовать, чтобы значение родительской высоты должно быть явно задано для процентного значения возраста ребенка имеет какое-либо значение. Но я отвлекаюсь...

Тем временем, используя "faux columns" , вы можете получить необходимый эффект. Концепция проста: вы позволяете дочернему div иметь автоматическую высоту, но затем вы рисуете фон родителя таким образом, чтобы он выглядел как фоновый дочерний div продолжается до полной высоты.

Пример этой ссылки делает это с фоновым изображением, но вы можете использовать фоновый градиент, если вы не возражаете жертвуя поддержкой Safari и IE9-. (Помня, что отсутствие поддержки просто означает не очень-то-красивое, все функционально одно и то же.)

Пример здесь:
http://fiddle.jshell.net/y6ZwR/3/