Bagaimana untuk Mendayakan Tatal Menegak dalam Apl Flexbox Tinggi Penuh?

Menggabungkan Flexbox dan Tatal Menegak dalam Aplikasi Ketinggian Penuh

Masalah:

Membuat reka letak aplikasi ketinggian penuh menggunakan flexbox sambil mendayakan menegak menatal.

Perbincangan:

Menggunakan sifat flexbox terkini, reka letak aplikasi dengan ketinggian penuh boleh dicapai. Walau bagaimanapun, menambah tatal menegak boleh mencabar.

Pendekatan awal menggunakan reka letak kotak flex yang sudah lapuk (cth., paparan: kotak) berdaya maju untuk penyemak imbas yang hanya menyokong versi lama itu.

Untuk mengatasi masalah ini isu, penggodaman telah dicadangkan, yang melibatkan penetapan ketinggian bekas kepada 0px. Walaupun penyelesaian ini menyelesaikan isu tatal, ia mewujudkan masalah baharu.

Penyelesaian:

Penyelesaian yang ideal ialah menetapkan ketinggian kepada elemen boleh tatal dalam reka letak kotak flex. Secara lalai, flexbox mengira ketinggian elemennya, jadi ketinggian 0px akan membolehkan tatal menegak dengan berkesan.

Jika ketinggian minimum dikehendaki, ketinggian min boleh digunakan sebaliknya, cth., ketinggian min: 100px .

Contoh Kod:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* or min-height: 100px */
}

Pendekatan ini memastikan bahawa elemen boleh tatal mempunyai ketinggian sambil membenarkan flexbox mengira semula secara dinamik.

Fiddle dikemas kini:

[JSFiddle yang dikemas kini](http://jsfiddle.net/ ch7n6/867/) menunjukkan penyelesaian muktamad.

Atas ialah kandungan terperinci Bagaimana untuk Mendayakan Tatal Menegak dalam Apl Flexbox Tinggi Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!