Bagaimana untuk Menetapkan Div kepada 100% Tinggi Badan, Tidak Termasuk Pengepala dan Pengaki Ketinggian Tetap?

Menetapkan Div kepada 100% Tinggi Badan, Tidak Termasuk Pengepala dan Pengaki Ketinggian Tetap

CSS membolehkan kawalan elegan ke atas reka letak halaman web. Satu keperluan biasa ialah untuk memaparkan kandungan pada 100% ketinggian badan, sementara tidak termasuk ruang yang diduduki oleh pengepala dan pengaki ketinggian tetap. Mencapai kesan ini memerlukan pelaksanaan CSS yang teliti untuk memastikan keserasian merentas penyemak imbas.

Satu penyelesaian kalis peluru ialah menetapkan html dan badan kepada ketinggian min: 100%;, memastikan halaman berkembang sebanyak mungkin. Kemudian, div pembalut hendaklah dibuat dengan kedudukan mutlak dan padding untuk menampung ketinggian pengepala dan pengaki. Dalam pembalut ini, div #content boleh ditetapkan kepada ketinggian min: 100%;, menyebabkan ia memenuhi ruang yang tinggal.

Untuk memastikan pengepala dan pengaki kekal tetap, margin atas: -50px; dan margin-bawah: -50px; digunakan, dengan berkesan menafikan padding yang ditambahkan pada pembalut. Nilai jidar negatif ini menolak pengepala dan pengaki di luar div pembalut, memberikan ilusi bahawa ia digantung di atas dan di bawah kandungan.

Teknik ini telah diuji dan terbukti berfungsi merentas pelayar moden dan juga Internet Explorer 8 dengan Modernizr (atau dengan hanya menggantikan elemen pengepala dan pengaki dengan div jika Modernizr tidak tersedia). Coretan kod dengan contoh langsung tersedia untuk penjelasan lanjut.

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