Bagaimana untuk Membuat Isi Div Kandungan 100% Ketinggian Badan Tidak Termasuk Pengepala dan Pengaki Tetap?

Cara Menetapkan Div Kandungan untuk Menduduki 100% Ketinggian Badan Tidak Termasuk Pengepala dan Pengaki Ketinggian Tetap

CSS membolehkan anda mentakrifkan dengan tepat dan susun atur serba boleh untuk halaman web. Satu cabaran biasa ialah menetapkan kawasan kandungan untuk menduduki ketinggian penuh halaman sambil mengecualikan ruang yang diambil oleh elemen ketinggian tetap seperti pengepala dan pengaki. Panduan ini menyediakan penyelesaian menyeluruh menggunakan CSS tulen yang serasi merentas semua penyemak imbas moden.

Struktur HTML termasuk pengepala, div kandungan dan pengaki. Dalam CSS, kami mulakan dengan memastikan bahawa elemen html dan badan mempunyai ketinggian minimum 100% dan tiada jidar atau padding.

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

Untuk meletakkan kawasan kandungan, kami memperkenalkan div #wrapper yang merentangi keseluruhan port pandangan menggunakan kedudukan mutlak.

<code class="css">#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}</code>

Di dalam #wrapper, kami mentakrifkan div kandungan (#content) dengan ketinggian minimum 100%. Ini memastikan ia memenuhi keseluruhan ruang yang ada.

<code class="css">#content {
  min-height: 100%;
}</code>

Untuk mengambil kira ketinggian pengepala dan pengaki, kami menggunakan margin negatif untuk mengimbanginya.

<code class="css">header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}</code>

Pendekatan ini memastikan bahawa div kandungan menduduki ruang yang tinggal selepas mengambil kira ketinggian tetap pengepala dan pengaki, menghasilkan reka letak yang lancar dan dinamik yang menyesuaikan diri dengan saiz skrin dan orientasi peranti yang berbeza.

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