Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mendayakan Tatal Menegak dalam Apl Flexbox Tinggi Penuh?

Bagaimana untuk Mendayakan Tatal Menegak dalam Apl Flexbox Tinggi Penuh?

Mary-Kate Olsen
Lepaskan: 2024-12-20 03:57:13
asal
408 orang telah melayarinya

How to Enable Vertical Scroll in a Full-Height Flexbox App?

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

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!

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan