Bagaimana untuk Membuat Div Kandungan Dinamik Mengisi Ketinggian Badan yang Selebihnya Selepas Pengepala dan Pengaki?

Pastikan Div Kandungan Dinamik Mengisi Baki Ketinggian Badan Selepas Pengepala dan Pengaki

Mencapai div kandungan yang merentangi ketinggian badan yang tinggal selepas pengepala dan pengaki ketinggian tetap adalah cabaran CSS biasa. Penyelesaian komprehensif berikut menangani isu ini merentas penyemak imbas moden dan Internet Explorer 8.

Dalam contoh ini, bungkus kandungan dalam div "#wrapper", diposisikan secara mutlak dan merentangi keseluruhan port pandangan. Tetapkan sifat "ketinggian min" kepada 100% untuk memastikan ia mengambil sekurang-kurangnya ketinggian itu dan tambahkan padding untuk mengambil kira pengepala dan pengaki.

Sarangkan kandungan dalam div "#content" dengan "ketinggian min" sebanyak 100% untuk menduduki ketinggian yang tinggal. Berikan ketinggian tetap pengepala dan pengaki dan laraskan marginnya secara negatif untuk mengimbangi pelapik dalam div "#wrapper".

<code class="css">html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}</code>

Penyelesaian ini melaraskan ketinggian div kandungan secara dinamik berdasarkan saiz port pandangan, memastikan ia mengisi ruang badan yang tinggal dengan lancar sambil menampung pengepala dan pengaki.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Kandungan Dinamik Mengisi Ketinggian Badan yang Selebihnya Selepas Pengepala dan Pengaki?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!