Почему высота DIV не увеличивается с процентами?

Question

Fiddle - http://jsfiddle.net/6axdexfj/

После того, как в большой, когда я наткнулся на проблему, и когда я ищу, чтобы найти решение, когда я не могу понять это сам.

Так я создаю дизайн приложения веб, и хотя из сегодня я был реконструировать его так не мусор CSS не добавляется.

Сегодня я добавил простой стиль к элементу, и я заметил, что если я не» t имеет position: absolute; или fixed на отдельном div, что его высота не изменяется при кодировании процентами.

.box1 { 
    width: 100%; 
    height: 50%; 
    background-color: rgb(0, 244, 85); 
} 

Я заметил это лет назад и до сих пор не знаю, почему это так. Я всегда избегаю этого, применяя следующее к своему телу.

body { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

Может кто-нибудь объяснить, почему это так?

Answer 1

Добавьте это в CSS и он должен работать

CSS

html, body { 
    height: 100%; 
} 

Проблема заключается в том, что ваш body и html контейнер не имеет полную высоту по умолчанию, таким образом, ваш div по умолчанию не будет иметь полную высоту. Для того, чтобы избежать этого в будущем, использовать reset.css, чтобы сделать вашу жизнь легко :)

LINK TO reset.css