Почему 100% не означает 100% высоты?

Я пытаюсь расширить divs, чтобы заполнить экран, но я боюсь. Я разбил вопрос на этот jsfiddle.

Что я действительно хочу знать, почему div, с его 100% min-height, не расширяется до этой высоты (или вообще), когда его родитель имеет тот же атрибут и расширяет?

<body>
    <div>
        stuff
    </div>
</body>

body {
    min-height: 100%;
    background: red;
}
div {
    min-height: 100%;
    background: grey;
}

Ответы

Ответ 1

потому что вы не можете реально использовать 100% -ную высоту для статического элемента. Изменение атрибута position от статического до абсолютного даст вам 100% высоты. демо

_{_{отправлен как ответ на запрос PO.}}

Ответ 2

Проблема раскрывается в спецификации CSS 2.1:

< процент >

Определяет процентную высоту. Процент рассчитанная по высоте сгенерированного окна содержащий блок. Если высота содержащего блока не является (т.е. зависит от высоты содержимого), и это элемент не является абсолютно позиционированным, значение вычисляется как "авто". процентная высота на корневом элементе относительно начального содержащий блок. Примечание. Для абсолютно позиционированных элементов, содержащий блок, основан на элементе уровня блока, процент рассчитывается по высоте поля для заполнения этого элемент. Это изменение от CSS1, где процент всегда был вычисленный относительно поля содержимого родительского элемента.

Итак, чтобы уточнить, процентная высота будет ссылаться на высоту своего содержащего блока (если это не position: absolute или position: fixed). Если этот содержащий блок не имеет заданной высоты, то процент будет относиться к auto, и на самом деле это будет мало.

position: absolute изменяет ссылочный содержащий блок на ближайший расположенный (absolute, relative или fixed) элемент.

position: fixed изменяет ссылочный содержащий блок в область просмотра.

Итак, если вы укажете высоту в своем блоке, укажите позицию, отличную от статики, в своем блоке, или не против использования окна просмотра в качестве вашего блока, тогда вы можете эффективно использовать процентные высоты.

См. мою демонстрацию в jsFiddle

Ответ 3

Вам нужно также установить высоту html, чтобы 100% ссылалась на высоту видового экрана вместо высоты документа (demo):

html,body {
    height: 100%;
    background: red;
    padding: 0;
}
div {
    height: 100%;
    background: grey;
}

Ответ 4

Процент высоты в CSS не имеет для меня большого смысла. Я бы сказал, что он не работает так, как должен, но энтузиасты CSS настаивали бы на этом.

В этой статье подробно рассматриваются проблема и решение:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Это также может помочь:

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id="outer"> 
    <div id="inner"></div> 
    text 
</div>

Подробнее см. здесь:
Как сделать плавающий div 100% высоты своего родителя?

Ответ 5

Есть две проблемы, вы также должны указать высоту html, как в:

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

Также возникает проблема в IE, где min-height не делает трюк для div, но указание высоты на div делает трюк. Таким образом:

html, body {
    min-height: 100%;
    background: red;
}
div {
    height: 100%;
    background: grey;
}