Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menjadikan Elemen Div Menduduki Ketinggian Halaman Selebihnya Sambil Mengekalkan Ketinggian Tetap untuk Div Lain?
Bagaimana untuk Menjadikan Elemen Div Menduduki Ketinggian Halaman Selebihnya Sambil Mengekalkan Ketinggian Tetap untuk Div Lain?
- Linda Hamiltonasal
- 2024-11-08 08:53:02774semak imbas
Mengekalkan Taburan Ketinggian Konsisten dengan Elemen Div
Memastikan taburan ketinggian berkadar antara berbilang elemen div boleh dicapai melalui teknik CSS lanjutan. Pertimbangkan senario berikut:
<div>
Matlamatnya adalah untuk menjadikan div2 menduduki baki ketinggian halaman, sambil membenarkan div1 mengekalkan ketinggian tetapnya.
Penyelesaian: Kedudukan Mutlak
Dengan menggunakan CSS berikut gaya, anda boleh mencapai gelagat yang diingini:
<div>
<div>
div1{
width: 100%; height: 50px; background-color:red;/*Development Only*/
}
div2{
width: 100%; position: absolute; top: 50px; bottom: 0; background-color:blue;/*Development Only*/
}
<div>
Penjelasan
Dengan menggunakan kedudukan mutlak pada div2, ia dialih keluar daripada aliran biasa halaman dan sebaliknya diletakkan berdasarkan nilai atas dan bawah yang ditentukan. Sifat atas menetapkan jarak dari tepi atas div1, manakala sifat bawah memastikan bahawa elemen memanjang ke bahagian bawah halaman. Lebar div2 ditetapkan kepada 100% untuk merentangi keseluruhan lebar halaman.
Teknik ini membolehkan anda melaraskan ketinggian div2 secara dinamik berdasarkan ketinggian div1 dan ketinggian halaman keseluruhan, memastikan konsistensi dan reka letak responsif.
Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Elemen Div Menduduki Ketinggian Halaman Selebihnya Sambil Mengekalkan Ketinggian Tetap untuk Div Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!