CSS - высота 100% не работает

Question

У меня есть следующий HTML код:

<div id="all"> 
    <div id="back"> 
     <div id="header">test</div> 
    </div> 
</div> 

И следующий CSS:

html,body{ 
    height: 100%; 
} 
#header{ 
    height: 100%; 
    background: red; 
} 

demo

, но и высота сто процентов не за работой!

Answer 1

Чтобы выполнить работу на 100% высоте, вам необходимо убедиться, что ваш родительский div также содержит высоту 100%. Так что попробуйте это:

html,body{ 
    height: 100%; 
} 
#header{ 
    height: 100%; 
    background: red; 
} 
#all,#back{ 
    height: 100%; 
} 

demo

Answer 2

Вы должны иметь все родители #header иметь height: 100% для этой работы.

Answer 3

попробовать это

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

} 
#header{ 
    height: 100%; 
    background: red; 
} 
#all,#back{ 
    height: 100%; 
} 

Answer 4

высота: 100% означает, что она будет занимать всю высоту родителя element.In #all вашего сценария родительского DIV и #back не имеет свою собственную высоту defined.So вы необходимо дать высоту: 100% к ним также

#all,#back 
{ 
    height:100% 
}