Сделать div отзывчивым без текстового содержимого

Question

У меня есть сценарий, в котором у контейнера div будет много дочернего div, но ни один из div не будет иметь фактического текстового содержимого. Все дочерние div будут иметь ширину и высоту в % контейнера div. Теперь, если поместить ширину и высоту контейнера div в px, то он появится в браузере, если я установил ширину &. Высота контейнера тоже в %, тогда ни один из div не отобразится в браузере. точно так же, как этот маленький фрагмент.

<div class="container"> 
    <div class="line1 line"> 
     <div class="item1"> 
     <div class="item2"> 
    </div> 
    <div class="line2 line"> 
     <div class="item1"> 
     <div class="item2"> 
    </div> 
</div> 

Css:

.container{ 
    width: 540px; 
    height: 440px; 
} 
.line{ 
    margin: 5% auto; 
} 
.line1{ 
    width: 15%; 
    height: 8%; 
} 
.line2{ 
    width: 40%; 
    height: 12%; 
} 

если я сделать

.container{ 
    width: 50%; //50% of browser screen width 
    height: 60%;//60% of browser screen height 
} 

Тогда ни один из DIV не отображается в браузере. Любое решение?

Answer 1

работает для меня: http://jsbin.com/esosoc/1/edit

Как @ Dominic-б-с указал, вы можете захотеть установить html, body { height: 100%; }. У вас есть все в процентах, которые оказываются относящимися к телу, в то время как тело измеряет высоту, основанную на высоте содержимого. Поэтому установите высоту явно.