Bagaimana untuk Menetapkan Ketinggian Div kepada 100% daripada Pengepala dan Pengaki Ketinggian Tetap Tolak Badan?

Menetapkan Ketinggian Div kepada 100% daripada Pengepala dan Pengaki Ketinggian Tetap Tolak Badan

Jika anda ingin menetapkan div kandungan untuk mengambil 100% ketinggian badan, tidak termasuk elemen pengepala dan pengaki ketinggian tetap, menggunakan CSS ialah penyelesaian yang ideal. Berikut ialah teknik kalis peluru yang berfungsi merentas penyemak imbas:

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

p {
  margin: 0;
  padding: 0 0 1em 0;
}</code>

Mari kita pecahkan elemen utama pendekatan ini:

• Kedudukan Mutlak: Div #wrapper diposisikan secara mutlak, membolehkan ia meregang ke ketinggian penuh port pandangan.
• Jing Negatif: Elemen pengepala dan pengaki menggunakan jidar negatif untuk bertindih #pembungkus. Ini mewujudkan ilusi bahawa mereka dibetulkan sambil memberikan ruang yang diperlukan kepada #content div.
• Ketinggian Minimum: Kedua-dua div #wrapper dan #content mempunyai ketinggian minimum yang ditetapkan kepada 100%. Ini memastikan mereka mengisi ruang yang tinggal yang tidak diambil oleh pengepala dan pengaki.

Teknik ini menyediakan penyelesaian silang penyemak imbas yang boleh menetapkan div kandungan kepada 100% ketinggian badan, tolak tetap- elemen pengepala dan pengaki ketinggian.

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