Mengisi Ruang Menegak Secara Responsif dengan #saat Menggunakan CSS Sahaja
Soalan:
Bagaimana boleh kita mengisi ruang menegak yang tinggal di bawah #first dalam #wrapper hanya menggunakan CSS?
Penyelesaian:
Untuk mencapai ini, kita boleh menggunakan sifat flexbox dalam CSS:
<code class="css">html, body { height: 100%; margin: 0; } .wrapper { display: flex; flex-direction: column; width: 300px; height: 100%; } .first { height: 50px; } .second { flex-grow: 1; }</code>
HTML:
<code class="html"><div class="wrapper"> <div class="first" style="background:#b2efd8">First</div> <div class="second" style="background:#80c7cd">Second</div> </div></code>
Penjelasan:
Atas ialah kandungan terperinci Bagaimana untuk Mengisi Ruang Menegak Baki dengan Div menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!