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

На этот вопрос уже есть ответ здесь:

Сделать тело на 100% высоты браузера 21 ответ

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

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

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

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

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

Это почему?

РЕДАКТИРОВАТЬ: Другими словами, я хочу, чтобы мой тег тела был не менее 100% экрана, но он должен расти, если контент добавляется.

 Obi-Wan Spock02 июн. 2013 г., 14:05
@Alohci в вашей скрипке, если вы удалите все <p> теги, высота равна 0. Я хочу, чтобы высота была такой же большой, как область просмотра
 Alohci01 июн. 2013 г., 12:18
Я могу'воспроизвести ваше поведение Jquery. Увидетьjsfiddle.net/VEsXm/1
 Jeroen01 июн. 2013 г., 11:48
Хм, если подумать, возможно, я был быстрым. Вопрос в том "Зачем"не как сделать вещи на 100%. Извиняюсь.
 Alohci02 июн. 2013 г., 14:16
@UmarP - Если ваш вопрос заключается в том, что с этим делать, посмотрите ответы на связанный вопрос, к которому он относится. Если ваш вопрос почемутвой код работает, см. Jeroenответ.
 Lucian Davidescu07 авг. 2015 г., 07:09
Вопрос, вероятно, не является дубликатом - кажется, что OP хочет иметь высоту тела, равную не окну браузера, а высоте документа - что должно происходить по умолчанию, если только ... содержимое тела не перемещается. Итак, короткий ответ, убери поплавок.
 Obi-Wan Spock02 июн. 2013 г., 14:06
@TaylorFlores да, я тестировал его в Chrome, Firefox и IE10
 tay10r01 июн. 2013 г., 11:34
Я неНе знаю ответа, но вы проверяли это во всех браузерах?

Ответы на вопрос(2)

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

body {
    background-color: lightblue;
}

Вы'Увидим весь экран теперь цветной. JQuery заявление выre .height () from по-прежнему только возвращает высоту содержимого, но не растягивается до высоты экрана. Если у вас есть полоса прокрутки, .height () тела будет возвращать высоту всего содержимого, а не только видимой области. Вы можете получить высоту окна с$(window).height(), Увидетьэта скрипка для демо.

 Obi-Wan Spock02 июн. 2013 г., 14:20
Я полагаю, что не смог правильно передать свой вопрос, это не то, что я искал. Кстати, Йерунs ответ помогает, поэтому я принял его ответ
Решение Вопроса

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

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

Это почему?

Ответ на "Зачем" всоответствующая спецификацияАкцент мой:

мин-высота

...

Значение: | | inherit

...



Указывает процент для определения используемого значения. Процент рассчитывается относительно высоты сгенерированного поля 'содержащий блок.Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процентное значение рассматривается как '0' (за 'мин-высота») или же 'никто' (за 'максимальная высота').

Вот почему вам нужно установить высоту для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 за поправку в интерпретации спецификации.

 Alohci01 июн. 2013 г., 12:23
Используйте рамку, а не цвет фона. background-color вводит в заблуждение, потому что он применяется и к окну просмотра. Увидетьjsfiddle.net/HxzjD/1 противjsfiddle.net/PE8Bc/1
 Jeroen01 июн. 2013 г., 12:50
@Alohci You 'очень прав. Я'Вы удалили мой комментарий и попытались обновить мой ответ в соответствии с вашим комментарием. Если вы чувствуете, что можете улучшить или уточнить, не стесняйтесь редактировать мой ответ.
 Obi-Wan Spock02 июн. 2013 г., 14:17
Итак, я читал ваш ответ и пытался понять, и, наконец, я знаю, чтоЧто-то не так, и что я должен сделать, чтобы это исправить. хитрость html {min-height: 100%; высота: 100%; }. Спасибо
 Alohci01 июн. 2013 г., 12:02
Правильно, но яЯ не уверен, что интерпретация верна. Я думаю, что min-height действительно влияет на элемент html (попробуйте поместить рамку вокруг него с min-height и без него). Но поскольку высота элемента html не указана явно, min-height не будет влиять натело элемент.
 Bruno Torquato08 янв. 2014 г., 20:57
Я считаю, что {min-height: 100%; высота: 100%;} избыточно, не так ли?

Ваш ответ на вопрос