Как я могу поместить 4 коробки по вертикали в div с разной высотой?

Question

У меня есть основная позиция div абсолютная, сверху: 0, нижняя: 0 ширина: 500 пикселей; и 4 divs в нем. См. Прикрепленное изображение. Я хочу, чтобы внутренние ящики Main div реагировали, если я настраиваю высоту окна. 1,2 и 3 имеет фиксированную высоту 100 пикселей и 4-й ящик реагирует.

Answer 1

Вы должны дать свой рост в процентах к желаемому эффекту.

Обратитесь к следующей скрипке и проверить изменения размера: https://jsfiddle.net/cn5bd6qq/

Прикрепленного код:

.parent { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 500px; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 
.child { 
 
    height: 25%; 
 
    width: 100%; 
 
}

<div class="parent"> 
 
    <div style="background-color: yellow;" class="child"> 
 

 
    </div> 
 
    <div style="background-color: blue;" class="child"> 
 

 
    </div> 
 
    <div style="background-color: purple;" class="child"> 
 

 
    </div> 
 
    <div style="background-color: green;" class="child"> 
 

 
    </div> 
 
</div>

Answer 2

процент пользователей по высоте до 4 дел.

Answer 3

(Благодаря nashcheez создавать коды) Я предлагаю с помощью флекс:

.parent { 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 500px; 
 
    height: 100%; 
 
    background-color: red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    position: absolute; 
 
    display: -webkit-flex; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
.last{  
 
    background-color: green; 
 
    flex-grow: 1; 
 
}

<div class="parent"> 
 
    <div style="background-color: yellow;" class="child"> 
 
    </div> 
 
    <div style="background-color: blue;" class="child"> 
 
    </div> 
 
    <div style="background-color: purple;" class="child"> 
 
    </div> 
 
    <div style="background-color: green;" class="last"> 
 
    </div> 
 
</div>