Почему HTML и BODY не принимают всю доступную высоту документа при минимальной высоте: 100%?

Я пытался понять этот сценарий

Я установил в CSS

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

Таким образом, когда на странице нет содержимого, html и body занимают 100% высоты страницы. И если в теле есть контент, они должны изменить их высоту в соответствии с высотой содержимого.

Но когда я добавляю контент на странице (достаточно для отображения полосы прокрутки), html и body не принимают 100% высоты документа. то есть, если высота экрана равна 700px, в любом случае $('body').height() вернет 700px;

Почему?

EDIT: Другими словами, я хочу, чтобы мой тег тела был как минимум на 100% экрана, но он должен расти, если контент добавлен.

Ответы

Ответ 1

Сначала я неправильно понял вопрос, но, с другой стороны, я бы это интерпретировал как:

Элемент html игнорирует min-height: 100%.

Почему это?

Ответ на вопрос "Почему" находится в соответствующей спецификации, мой упор:

мин-высота

...

Значение: <length> | <percentage> | inherit

...

<percentage>
Определяет процент для определения используемого значения. Процент вычисляется относительно высоты генерируемого блока, содержащего блок. Если высота содержащего блока явно не указана (т.е. зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процентное значение рассматривается как '0' (для 'min- height ') или ' none '(для' max-height ').

Вот почему вам нужно установить высоту для элемента html для min-height для работы с элементом body. В качестве альтернативы вы можете полностью позиционировать элемент html, например:

html { border: 10px solid black }
body { border: 10px dashed red }

html { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }    
/* alternatively: html { min-height: 100%; height: 100%; } */    

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

Смотрите демонстрацию position: absolute или демонстрацию height: 100%.

Спасибо @Alohci за то, что я исправил интерпретацию спецификации.

Ответ 2

В случае, описанном вами, html и body занимают 100% высоты экрана. Добавьте фоновый цвет, чтобы увидеть это:

body {
    background-color: lightblue;
}

Вы увидите, что весь экран теперь окрашен. Оператор jquery, который вы получаете .hight(), по-прежнему возвращает высоту содержимого, а не растягивается до высоты экрана. Когда у вас есть полоса прокрутки,.height() тела вернет высоту всего содержимого, а не только видимую область. Вы можете получить высоту окна с помощью $(window).height(). См. эту скрипту для демонстрации.