Сделать строку занимает оставшееся пространство в высоту

Question

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

Я не могу понять, как это сделать, даже с помощью flexbox.

Упрощенная структура HTML у меня есть:

<div class="wrapper"> 
    <div class="row1">This row takes up remaining space in height, image should scale up to touch footer 
     <br /> 
     <img src="http://www.placehold.it/200x200" /> 
    </div> 
    <div class="row2">Fixed height footer always stuck to bottom of window</div> 
</div> 

JSFiddle ниже: http://jsfiddle.net/1swdf6eh/5/

Answer 1

Вы имеете фиксированную высоту .row2. Таким образом, вы можете использовать calc(100% - 180px) для .row1

.wrapper { 
 
    height: 100vh; 
 
    border: 1px solid black; 
 
    position: relative; 
 
} 
 
.row1 { 
 
    text-align: center; 
 
    background: #ececec; 
 
    height: calc(100% - 180px); 
 
} 
 
img { 
 
    height: 100%; 
 
} 
 
.row2 { 
 
    height: 180px; 
 
    width: 100%; 
 
    background: blue; 
 
    color: white; 
 
    text-align: center; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="wrapper"> 
 
    <div class="row1">This row takes up remaining space in height, image should scale up to touch footer 
 
    <br /> 
 
    <img src="http://www.placehold.it/200x200" /> 
 
    </div> 
 
    <div class="row2">Fixed height footer always stuck to bottom of window</div> 
 
</div>

Answer 2

Вы действительно должны установить row2 абсолютное ?? Попробуйте снести высоту обертки на%, поэтому вместо того, чтобы давать row2 180 px, дайте ей высоту 5% и удалите абзац позиционирования и дайте row1 height 95%