Div’in yüksekliğinin sayfa genişliği ile orantılı değişmesi

Html ve CSS yazarken, bazen, böylesine basit ve temel ihtiyaçların nasıl olup da düşünülemediğini herkes kendi kendine sormuştur.
Evet malesef, div için 100% gibi bir yükseklik değeri çalışmamakta. Bu noktada küçük hileler ile bunu biz yapmak zorunda kalıyoruz.

Şöyle bir html’imiz olsun

<div class="ratio-4-3">
  <h3>Başlık</h3>
  <p>Lorem ipsumm dolor sit amet</p>
</div>

Bu div için ürettiğimiz css ise şöyle olsun:

   .ratio-4-3{
      border:1px solid #cccccc;
      width: 40%;
      height: 30%;
}

sonuç:

Malesef, sadece genişiliği sayfa genişliği ile orantılı olarak değişiyor yükseklik sabit. İşte bu temel probleme karşılık yapmamız gereken şey, margin özelliğni kullarak, sayfa genişliğiyle orantılı olarak div yükseklğini değiştirmek.

Yeni modelde html şöyle olmalı:

<div class="ratio-4-3">
  <div class="ratio"></div>
   <div class="holder">
     <h3>Başlık</h3>
     <p>Lorem ipsumm dolor sit amet</p>
   </div>
</div>

ve bu html için, yazmamız gereken css de şöyle olmalı:

.ratio-4-3{
    border: 1px solid #ccc;
    width:40%;
    position:relative;
}

.ratio-4-3 .ratio{
  margin-top:75%;
}
.ratio-4-3 .holder{
  position:absolute;
  top:0;
}

ve elde etmemiz gereken sonuç: