Тело CSS 100% высота и переполнение при необходимости

Question

Я знаю, как обеспечить, чтобы тело HTML вертикально растягивалось/сжималось до 100% высоты окна просмотра браузера (имея 100% высоты в теле и правилах html).

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

Тем не менее, я не могу достичь обоих.

I.e. Я не могу победить CSS, чтобы убедиться, что когда моя страница просматривается на экране с высоким разрешением, который он вертикально растягивается, чтобы не оставлять пробелов, и чтобы убедиться, что если моя страница просматривается на экране с более низким разрешением, который тело растягивает через окно просмотра (для размещения всех содержимое) и вводит полосы прокрутки.

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

Возможно ли, или я вынужден использовать JavaScript?

Редактировать: Я исследовал, пробовал и тестировал так много техник, но похоже, что это невозможно. Похоже, мне придется вернуться к JavaScript.

Answer 1

ОК так что это, безусловно, работает на me:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    display: flex; 
} 

#wrapper { 
    width: 100%; /* Necessary because of side-effect of flex */ 
    height: 100%; 
} 

Точно то, что я пробовал раньше, но я думал, что дам эту новую функцию CSS «flex», и она сделала трюк. Таким образом, похоже, что менеджеры/создатели CSS, наконец, решили эти критические проблемы с динамической высотой и вертикальным центрированием.

Я надеюсь, что это поможет кому-то еще застрять в этом вопросе.

Answer 2

Вы можете использовать собственность min-height css.

html, body { 
    min-height: 100%; 
} 

Answer 3

min-height: 100%; /* other browsers */ 
height: auto !important; /* other browsers */ 
height: 100%; /* IE6: treated as min-height*/ 

Answer 4

Вдохновляясь вопрос, который, кажется, почти так же, как у меня: Make body have 100% of the browser height

Это работает для меня:

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
}