Bagaimanakah Saya Boleh Membuat Elemen DIV Mengisi Keseluruhan Lebar dan Tinggi Sel Jadual Menggunakan CSS?

Mencapai DIV Lebar dan Tinggi Penuh dalam Sel Jadual dengan CSS

Soalan ini berterusan tidak dapat diselesaikan selama bertahun-tahun. Walau bagaimanapun, dengan CSS3, kita boleh menyemak semula cabaran dan meneroka cara memanjangkan DIV untuk mengisi keseluruhan lebar dan ketinggian sel jadual.

Inti masalah terletak pada sifat dinamik dimensi sel dan tindak balas terhad nilai 100%. Untuk mengatasinya, penyelesaiannya melibatkan helah yang bijak.

Mula-mula, tetapkan ketinggian bukan sifar (contohnya, 1px) pada baris jadual. Helah ini mencetuskan pengecaman ketinggian baris penyemak imbas, membolehkan kawalan seterusnya.

Seterusnya, tetapkan ketinggian DIV kepada 100%, yang kini menjadi relatif kepada ketinggian baris yang ditetapkan. Ini memastikan bahawa DIV berkembang secara dinamik untuk mengisi sel secara menegak.

Untuk memadankan lebar DIV, lebar sel boleh ditentukan secara eksplisit menggunakan CSS atau bersaiz automatik berdasarkan kandungannya.

Menggunakan ini peraturan memastikan bahawa DIV mengisi keseluruhan dimensi sel jadual, tanpa mengira awal atau dinamiknya nilai.

Berikut ialah contoh coretan CSS:

table {
  width: 200px;
}

tr {
  height: 1px;
}

td {
  height: inherit;
}

div {
  height: 100%;
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen DIV Mengisi Keseluruhan Lebar dan Tinggi Sel Jadual Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!