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

DDD
Lepaskan: 2024-10-31 03:11:02
asal
876 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!