Сделайте высоту DIV как минимум высоты экрана

Question

Основное содержание div #page-content-wrapper затенено светло-серого цвета.

Как можно увеличить высоту этого div так, чтобы нижняя часть этого div находилась в нижней части экрана? height: 100%;, похоже, не работает.

Содержимое растёт до высоты более 1 вида, что требует вертикального прокрутки.

CSS

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
    background: #ddd; 
    height: 100%; 
} 

Bootply: http://www.bootply.com/kkrDITPGrO

Answer 1

Использование height: 100vh ... или дать #wrapper и html, body также height: 100%

Чтобы элемент реагировал на высоту с использованием процента, ее родительскому нужно высота, и если родительский элемент также использует проценты, вам нужно пройти весь путь к элементу html/body, чтобы он мог вычислить его высоту на что-то иное, чем auto.

Updated bootply

---

Обновление на основе комментариев

Для контента, чтобы иметь возможность расти, использовать min-height: 100vh ... или min-height: 100%, используя один и тот же "процент" принцип как выше

#page-content-wrapper { 
    min-height: 100vh; 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
    background: #ddd; 
} 

Updated booply