Как сделать высоту div равной ширине для создания чувствительных квадратов при использовании сетки?

Question

Я использую шаблон скелета, чтобы создать сетку. Сетка, которую я пытаюсь достичь, состоит из 3 квадратов на строку. Я попытался сделать процент высоты (33,33%), но он все еще не создает квадрат. Спасибо! :)

Answer 1

На CSS3 вы будете использовать блок vh, это то же самое в процентах, относительно, в этом случае - viewport height.

33.33% как тот же, что и для 33.33vh, и ваша коробка должна быть отрегулирована до view height вида.

Oсмотрите все Css Units.

пример

.box{ 
 
    width: 100%; 
 
    height: 33.33vh; 
 
    } 
 
.foo{background-color: red;} 
 
.bar{background-color: purple;} 
 
.na{background-color: blue;}

<div class='box foo'></div> 
 
<div class='box bar'></div> 
 
<div class='box na'></div>

Эти относительные единицы на CSS.
Попробуйте один из них.