masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

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 Hamilton

Lepaskan： 2024-11-08 08:53:02

asal

772 orang telah melayarinya

How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

div1{

width: 100%;
height: 50px;
background-color:red;/*Development Only*/

Salin selepas log masuk

}

div2{

width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/

Salin selepas log masuk

}

<div>

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Memaparkan Teks pada Tuding Imej Tanpa Menggunakan Petua Alat? Artikel seterusnya：Mengapakah `querySelector` hanya memilih elemen pertama dalam kelas `.weekdays`?

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

2055

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

2211

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

1865

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