Какова высота: 100% работает на относительных divs?

Question

Как это так, что высота: 100% действительно работает на .rel div? Я знаю, что относительные дивы не приняты процентные высот в счете в прошлом ...

.box{ 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.rel{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
a{ 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
} 
 

 
b{ 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div class="box"> 
 
    <div class="rel"> 
 
    <a> aa </a> 
 
    <b> bb </b> 
 
    </div> 
 
</div>

Answer 1

Относительные дивы могут использовать процентные высоты, если их родители (box, в данном случае) также учитывая высоту. Поскольку вы дали box высоту 200px, давая rel, процентная высота фактически означает что-то. Если его родитель не имеет определенной высоты, высота rel будет бессмысленной, поскольку ее родительский элемент не имеет высоты. Если вы удаляете высоту box, изменение высоты rel ничего не будет сделано, как показано здесь: http://jsfiddle.net/sxv9jLdz/