Получение вывода в HTML5

Question

Почему этот код не дает никакого вывода?
Я не понимаю, в чем проблема.

.a { 
 
    background-color: #ff0000; 
 
    height: 30%; 
 
    width: 100%; 
 
}

<div class="a"> 
 
</div>

Answer 1

Ваш DIV не имеет никакого содержания, и даже если вы дали ему высоту она не имеет ни одного, так как его родитель не имеет высоту. Попробуйте добавить высоту к родителю, как:

.a { 
 
    background-color: #ff0000; 
 
    height: 30%; 
 
    width: 100%; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
}

<div class="a"> 
 
</div>

В качестве docs по высоте состояния:

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

Answer 2

.a { 
 
    background-color: #ff0000; 
 
    height: 30%; 
 
    width: 100%; 
 
    
} 
 
body { 
height: 100% 
}

<div class="a"> 
 
</div>