Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencapai Div Ketinggian Badan 100% dengan Pengepala dan Pengaki Tetap?

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

Mary-Kate Olsen
Lepaskan: 2024-11-03 22:10:02
asal
622 orang telah melayarinya

How to Achieve a 100% Body Height Div with Fixed Header and Footer?

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>
Salin selepas log masuk
<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan