Bagaimanakah Saya Boleh Membuat Elemen Div Bersarang Mengisi Ketinggian Bekas Induk TDnya?-tutorial css-php.cn

How Can I Make a Nested Div Element Fill the Height of its TD Parent Container?

Menggayakan Elemen Bersarang untuk Mengisi Ketinggian Bekas Induk

Dalam HTML, anda boleh menghadapi situasi di mana elemen kanak-kanak perlu berkembang untuk mengisi ketinggian bekas induknya. Ini boleh menjadi mencabar apabila berurusan dengan elemen jadual, seperti

elemen dalam elemen.

Matlamat: Buat

elemen sepenuhnya menduduki ketinggian bekas, membenarkan kedudukan elemen latar belakang yang betul.

Penyelesaian:

Pertimbangkan menggunakan helah untuk mewujudkan ketinggian tetap untuk elemen, walaupun ia adalah nilai minimum seperti 1px. Ini mewujudkan ibu bapa dengan ketinggian yang ditentukan, membenarkan

bersarang; elemen untuk mengira ketinggian peratusannya dengan betul.

Pecahan Terperinci:

Tetapkan Ketinggian untuk Elemen: Tetapkan ketinggian 1px kepada elemen menggunakan CSS:

td.thatSetsABackground {
  height: 1px;
}

Salin selepas log masuk

Kira Peratusan Tinggi bagi
Elemen:
elemen kini akan mempunyai induk dengan ketinggian yang ditentukan. Ketinggiannya boleh ditetapkan sebagai peratusan ketinggian induk ini:

div.thatSetsABackgroundWithAnIcon {
  height: 100%;
}

Salin selepas log masuk

Elemen Latar Belakang Kedudukan: Elemen latar belakang yang diingini dalam
boleh diletakkan di sudut kanan bawah menggunakan CSS, berdasarkan ketinggian div yang dikembangkan:

div.thatSetsABackgroundWithAnIcon {
  background-position: bottom right;
}

Salin selepas log masuk

Pendekatan ini memaksa

elemen untuk mengisi ketinggian elemen, membenarkan peletakan elemen latar belakang yang tepat dalam bekas induk.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen Div Bersarang Mengisi Ketinggian Bekas Induk TDnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mengakses Atribut Gaya Kelas CSS Menggunakan JavaScript atau jQuery? Artikel seterusnya：Bagaimana untuk Meletakkan Div di Bahagian Bawah Bekasnya dengan Balutan Teks?

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2159

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2310

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1947

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...