Bagaimana untuk Menjadikan Div Tetap Responsif kepada Lebar Induk Mereka?

Menempatkan Div Tetap Berkaitan dengan Elemen Induk

Apabila cuba menetapkan lebar div dengan kedudukan: tetap, pengguna mungkin menghadapi kesukaran jika mereka menginginkan lebarnya relatif kepada div induknya. Walau bagaimanapun, secara lalai, elemen tetap mewarisi lebarnya daripada dokumen atau tetingkap.

解决方案

Untuk menyelesaikan isu ini, gunakan atribut CSS berikut pada div induk :

width:inherit;

Ini mengarahkan div dalam dalam div induk untuk mewarisi lebar div induk. Akibatnya, lebar div tetap adalah relatif kepada div induknya, memberikan reka letak yang diingini.

Contoh

<div>

#container {
  width: inherit;
}

#fixed {
  position: fixed;
  width: 100%;
}

Nota :

Jika penyemak imbas tertentu memerlukan sokongan warisan lebar, pertimbangkan untuk melaksanakan penyelesaian berasaskan JavaScript. Walau bagaimanapun, bagi kebanyakan penyemak imbas moden, menggunakan "width: inherit" pada div induk harus menyelesaikan isu ini dengan berkesan.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Div Tetap Responsif kepada Lebar Induk Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!