Berikut ialah beberapa pilihan tajuk yang sesuai dengan kandungan dan gaya artikel anda: Pilihan 1 (Terus dan Jelas): * Cara Mengagihkan Baki Ruang Menegak dengan Flexbox Pilihan 2 (Format Soalan): * Ingin t

Mencapai Taburan Ketinggian Ideal dengan Flexbox dan Baki Ruang Menegak

Flexbox mempersembahkan penyelesaian CSS yang elegan dan cekap untuk mengisi ruang menegak yang tinggal dalam elemen bekas. Dalam kes ini, kami menyasarkan untuk mengagihkan ketinggian antara div #pertama dan #kedua dalam bekas #pembungkus, memastikan #kedua menempati ruang yang tinggal.

Penyelesaian yang diterima pakai memanfaatkan kod CSS berikut:

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

Dalam div #wrapper, kami mewujudkan susun atur kotak flex dengan orientasi menegak. Ini membolehkan dua div, #first dan #second, untuk menjajarkan secara menegak. Ketinggian #wrapper ditetapkan kepada 100%, memastikan ia menempati ketinggian penuh port pandangan.

Untuk menentukan ketinggian #first, kami menetapkan nilai tetap 50px. Untuk #saat, kami memanfaatkan sifat flex-grow untuk mengawal ketinggiannya. Dengan menetapkan flex-grow kepada 1, kami menunjukkan bahawa #second harus berkembang untuk mengisi mana-mana ruang yang tinggal dalam bekas #wrapper.

Hasilnya, #first menduduki ketinggian tetap 50px, manakala #second melaraskan secara dinamik ketinggiannya untuk memenuhi ruang menegak yang tinggal. Ini memastikan reka letak menyesuaikan diri dengan saiz skrin dan orientasi peranti yang berbeza.

Atas ialah kandungan terperinci Berikut ialah beberapa pilihan tajuk yang sesuai dengan kandungan dan gaya artikel anda: Pilihan 1 (Terus dan Jelas): * Cara Mengagihkan Baki Ruang Menegak dengan Flexbox Pilihan 2 (Format Soalan): * Ingin t. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!