Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengisi Ruang Menegak Baki dengan Div menggunakan CSS sahaja?

Bagaimana untuk Mengisi Ruang Menegak Baki dengan Div menggunakan CSS sahaja?

DDD
DDDasal
2024-10-31 03:11:02852semak imbas

How to Fill Remaining Vertical Space with a Div using Only CSS?

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:

  1. Tetapkan ketinggian kepada 100% untuk html dan badan untuk menduduki ketinggian penuh port pandangan.
  2. Buat bekas induk .pembungkus dengan paparan: lentur.
  3. Tetapkan arah lentur: lajur untuk menyusun elemen anak secara menegak.
  4. Tetapkan ketinggian tetap pada .first untuk menentukan saiznya.
  5. Gunakan flex-grow: 1 pada .second untuk membolehkannya mengembang dan mengisi ruang menegak yang tinggal.

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!

Kenyataan:
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