div ile tüm alanı doldurma

İçeriğin tüm ekranı kaplamasını istediğim bir web uygulaması yapmak istediğimizi varsayalım. Sayfada logo ve hesap bilgilerini içeren bir üstbilgi olsun. Geri kalan alanın ise bir div ile sayfanın en altına kadar doldurulmasını isteyelim.

flexbox

Burada uygulanacak en güzel çözümü Flexbox.

Tüm büyük tarayıcılar ve IE11+ Flexbox’ı destekler. IE 10 veya üstü için FlexieJS çözümünü kullanabilirsiniz.

Mevcut desteği kontrol etmek için caiuse’a bakabilirsiniz: http://caniuse.com/#feat=flexbox

Çalışma örneği

Flexbox ile sabit boyutlara, sadece içerik boyutu veya kalan boşluk boyutlarına sahip satırı veya sütunu oluşturabilirsiniz. Aşağıdaki koda bakalım:

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Yukarıdaki CSS’de, flex,  flex-grow, flex-shrink, ve flex-basis için bir kısayol oluşturur.