Bagaimana untuk Membuat Elemen DIV Regangan ke Ketinggian Sel Mejanya?

Cara Meregangkan DIV untuk Mengisi Ketinggian Sel Jadual

Dalam reka letak HTML tertentu, anda mungkin memerlukan elemen DIV untuk meregangkan menegak untuk memadankan ketinggian sel jadual induknya (TD). Ini membolehkan anda meletakkan kandungan dalam DIV dengan tepat, seperti menjajarkannya di sudut kanan bawah sel.

Untuk mencapai ini, satu pendekatan ialah menetapkan ketinggian 1px kepada TD. Ini memberikan DIV ketinggian induk yang ditentukan untuk mengira peratusan ketinggiannya. Memandangkan kandungan DIV lebih besar daripada 1px, TD dan seterusnya DIV akan berkembang secara menegak secara automatik.

Berikut ialah contoh:

<table>

CSS:

.td-container {
  background-color: #f5f5f5;
}

.div-content {
  height: 100%;
  background-image: url(icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}

Dalam contoh ini, TD mempunyai ketinggian 1px dan warna latar belakang untuk tujuan demonstrasi. DIV dalam TD mempunyai ketinggian 100%, yang menyebabkan ia meregang secara menegak untuk mengisi TD. Imej latar belakang kemudiannya diletakkan di sudut kanan bawah DIV disebabkan oleh sifat kedudukan latar belakang.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Elemen DIV Regangan ke Ketinggian Sel Mejanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!