Bagaimana untuk Mencapai Div Ketinggian Badan 100% dengan Pengepala dan Pengaki Tetap?

Mencapai Div Ketinggian Badan 100% dengan Pengepala dan Pengaki Tetap

Situasi Awal:

Dalam reka letak halaman web , anda ingin mencipta div kandungan yang memenuhi seluruh ketinggian badan, tidak termasuk pengepala dan pengaki ketinggian tetap.

Penyelesaian:

1. Tetapkan Garis Dasar Ketinggian Minimum:

   Isytiharkan elemen html dan badan dengan ketinggian min: 100%;. Ini memastikan ia memanjang ke ketinggian tetingkap penuh.

2. Buat Pembungkus untuk Kandungan:

   Buat div #pembungkus yang mengandungi segala-galanya, tidak termasuk pengepala dan pengaki. Letakkannya secara mutlak dan kekangnya kepada dimensi tetingkap penuh.

3. Tentukan Kawasan Kandungan:

   Di dalam #pembungkus, buat #kandungan div untuk kandungan utama. Tetapkan ketinggian minnya kepada 100% untuk mengisi ruang yang tinggal.

4. Letakkan Pengepala dan Pengaki:

   Tambahkan elemen pengepala dan pengaki dengan ketinggian tetap dan warna yang sesuai. Gunakan sifat margin atas dan margin bawah dengan nilai negatif untuk meletakkannya di atas dan di bawah #wrapper.

Pelaksanaan:

<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>

<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>

Kod ini memastikan div #content memenuhi seluruh ketinggian badan sambil menampung pengepala dan pengaki ketinggian tetap. Ia berfungsi dalam penyemak imbas moden dan IE8 dengan skrip Modernizr (atau boleh diubah suai untuk menggunakan div dan bukannya elemen pengepala dan pengaki).

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Div Ketinggian Badan 100% dengan Pengepala dan Pengaki Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!