Rumah > Artikel > hujung hadapan web > Bagaimanakah Saya Boleh Mencipta DIV Kandungan Bendalir Antara Pengepala dan Pengaki Tetap Menggunakan Flexbox?
Bagaimanakah Saya Boleh Mencipta DIV Kandungan Bendalir Antara Pengepala dan Pengaki Tetap Menggunakan Flexbox?
- Patricia Arquetteasal
- 2024-11-08 08:17:01306semak imbas
Mencipta DIV Kandungan Bendalir Antara Pengepala dan Pengaki
Dalam mengejar reka bentuk reka letak moden, anda telah beralih daripada jadual kepada div. Menghadapi cabaran menjajarkan pengepala, pengaki dan div kandungan anda, anda mencari penyelesaian elegan yang memenuhi pelbagai resolusi skrin.
Pertimbangkan pendekatan Flexbox, yang menawarkan penyelesaian yang mantap untuk dilema reka letak ini. Dengan memanfaatkan keupayaan sedia ada Flexbox, anda boleh mencapai hasil yang diinginkan: elemen pengepala dan pengaki melekit dengan kawasan kandungan yang memenuhi ruang yang tinggal dengan lancar dan membolehkan penatalan lancar dalam sempadannya.
Pelaksanaan Flexbox
Melaksanakan Flexbox adalah mudah, memerlukan beberapa tweak HTML dan CSS:
HTML:
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>
CSS:
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
Persediaan ini mengunci elemen pengepala dan pengaki dalam saiz yang ditentukan, sambil membenarkan kawasan kandungan berkembang secara dinamik untuk mengisi ruang menegak yang tinggal. Sifat limpahan-y dan -webkit-overflow-scroll memastikan bahawa mana-mana kandungan yang melebihi ketinggian kawasan kandungan akan menatal dengan lancar dalam hadnya.
Harapkan kefleksibelan dan kepelbagaian kuasa Flexbox dan mencipta reka letak harmoni yang menyesuaikan dengan lancar dengan mudah. kepada resolusi skrin yang pelbagai.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta DIV Kandungan Bendalir Antara Pengepala dan Pengaki Tetap Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!