Bagaimanakah Saya Boleh Membuat Baris Flexbox Mengisi Baki Ruang Menegak dalam Tetingkap Penyemak Imbas?

Menjadikan Reka Letak Flexbox Anda Menggunakan Baki Ruang Menegak

Barisan ketiga susun atur flexbox perlu berkembang secara dinamik untuk mengisi baki ketinggian tetingkap penyemak imbas. Untuk mencapai matlamat ini, gunakan langkah berikut:

1. Tetapkan ketinggian html, badan dan bekas flexbox induk (.wrapper) kepada 100% untuk mewarisi ketinggian penuh ibu bapa.
2. Gunakan nilai lentur yang lebih besar daripada 1 pada baris ketiga (.row3) sahaja, meninggalkan baris lain dengan ketinggian asalnya. Ini akan memberi .row3 keupayaan untuk berkembang.
3. Tambahkan kod berikut di dalam kelas .wrapper untuk memastikan lajur mengenali ketinggian penyemak imbas penuh:

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome needed this initially */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Chrome also needed this at one point */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome might need this for a bit */
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Baris Flexbox Mengisi Baki Ruang Menegak dalam Tetingkap Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!