Сделать квадратные divs, чтобы занять весь экран

Question

Я бы хотел, чтобы они занимали весь экран горизонтально, как квадраты, и вписывались в него. В настоящий момент они подходят, потому что они являются встроенными блоками, но при определенных размерах экрана (или если вы немного уменьшаете масштаб), они оставят свободное пространство размером < 250 пикселей.

Я мог бы дать им, например, width:25%;, но как я могу сделать их квадратами? Как установить высоту равной динамической ширине?

.note { 
 
    display: inline-block; 
 
    /* 
 
#F3F389-galben 
 
#96C0FF albastru 
 
#94F1B6 verde 
 
rosu#f40042 
 
    */ 
 
    background-color: #f40042; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-left: 25px; 
 
    margin-top: 25px; 
 
    padding: 0; 
 
} 
 
textarea { 
 
    width: 80%; 
 
    height: 60%; 
 
    display: block; 
 
    margin-top: 15px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    resize: none; 
 
    background: rgba(0, 0, 0, 0.13); 
 
    border: none; 
 
    padding: 5px; 
 
    font-family: 'Rancho', Helvetica, sans-serif; 
 
    font-size: 15px; 
 
}

<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div> 
 
<div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
</div>

Answer 1

Я не знаю, каким образом можно использовать HTML, CSS для этого. Вы должны использовать сценарий, чтобы установить высоту DIV/элемент, чтобы быть таким же, как динамическая ширина

var w = $('.note').width(); 
$('.note').css({'height':w + 'px'}); 

Answer 2

Установите ширину в%, а затем создать равную высоту, давая элемент padding-bottom: 100%;.