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

Question

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

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

Я попытался проиллюстрировать проблему в this image. Я хочу, чтобы 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> 

Answer 1

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

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

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

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

Voila!

конденсаторные только существенный код:

Markup:

<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 или мобильных браузерах, оставьте комментарий.

Answer 2

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

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

Answer 3

Flex-коробки будут красивыми, когда они будут широко поддерживаться.

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

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

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

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