Bagaimana untuk Menetapkan Lebar Elemen Tetap Relatif kepada Induknya?

Memahami Lebar Elemen Tetap Berbanding Induk

Dalam mentakrifkan lebar div tetap berbanding induknya, cabaran timbul apabila elemen tetap kelihatan untuk mengambil keseluruhan lebar tetingkap sebaliknya. Ini kerana kedudukan tetap mengalih keluar elemen daripada aliran biasa, menyebabkan ia bebas daripada lebar induknya.

Penyelesaian: Warisi Lebar Induk

Untuk menyelesaikan isu ini , penyelesaiannya terletak pada mewarisi lebar div induk. Dengan menambah lebar: inherit; kepada semua div dalaman, elemen tetap akan menggunakan lebar induk terdekatnya.

JavaScript Alternatif

Untuk penyemak imbas lama yang tidak menyokong lebar: inherit;, a Penyelesaian JavaScript boleh digunakan. Ia melibatkan penggunaan fungsi untuk menetapkan lebar elemen tetap secara eksplisit apabila halaman diubah saiz atau kandungannya berubah. Ini memastikan elemen tetap mengekalkan hubungan yang diingini dengan induknya.

Contoh dan Demonstrasi

Contoh pelaksanaan dengan lebar: warisan; boleh didapati di sini: https://jsfiddle.net/4bGqF/9/. Sebagai alternatif, penyelesaian JavaScript boleh dilaksanakan seperti berikut:

// Get the parent div's width
var parentWidth = document.getElementById("container").offsetWidth;

// Apply the width to the fixed div
document.getElementById("fixed").style.width = parentWidth + "px";

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Lebar Elemen Tetap Relatif kepada Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!