Saya mempunyai tapak web permainan yang mempunyai pengepala, papan dan pengaki. Saya memerlukan ketiga-tiganya untuk dimuatkan di dalam port pandangan. Papan harus lebih kecil untuk mencapai ini.
Minifikasi ialah masalah yang saya hadapi. Saya telah mendapat respons lebar tetapi bukan ketinggian yang terhad.
Papan hendaklah kekal segi empat sama dan menempati ruang yang tidak digunakan atau mengecut untuk mengelakkan limpahan.
Saya melakukan sesuatu mengikut garisan di bawah, tetapi papan itu akhirnya melimpahi ketinggian ibu bapa.
Dalam kod sebenar saya, ketinggian tajuk tidak diketahui kerana pembalut baris. Pengaki mempunyai jumlah teks yang berbeza-beza. Di dalam papan catur terdapat satu siri div yang mewakili baris dan satu siri elemen kanak-kanak yang mewakili petak pada papan catur. Segi empat sama mempunyai nisbah bidang
.parent { ketinggian: 100vh; warna latar belakang: kelabu; paparan: flex; flex-direction: lajur; } .kepala { ketinggian: 10px; warna latar belakang: biru; } .anak { warna latar belakang: merah; lentur: 1 1 auto; } .papan catur { lebar: 100%; ketinggian maksimum: 100%; nisbah aspek: 1/1; warna latar belakang: ungu; margin: auto; } .footer { ketinggian: 10px; warna latar belakang: hijau; } Terima kasih atas sebarang bantuan.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda telah
aspect-ratiomemberitahu papan supaya mempunyai ketinggian yang sama dengan lebar, jadi jika lebar anda ialah 3000px, ketinggian anda akan sama. Anda ada pilihan*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } .parent { height: 100vh; background-color: grey; display: flex; flex-direction: column; } .header { flex-shrink: 0; height: 10px; background-color: blue; } .child { flex-grow: 1; background-color: lightcoral; } .chessboard { height: 100%; max-height: 100%; background-color: purple; margin: auto; } .footer { flex-shrink: 0; height: 10px; background-color: green; }Jawapan akhir bergantung pada beberapa penjelasan daripada anda. Saya bertanya kepada anda dalam ulasan mengenai soalan ini. Tetapi saya akan memberikan jawapan umum.
Saya akan menerangkan secara ringkas apa yang dilakukan dalam contoh di bawah.
Saya mencipta
.chessboard-wrapper，其中有一个aspect-ratio: 1;..chessboard本身具有position:absolute;Dan akan datang dalam saiz ayah.* { margin: 0; padding: 0; box-sizing: border-box; } .parent { height: 100vh; background-color: grey; display: flex; flex-direction: column; } .header { height: 10px; background-color: blue; flex: none; } .child { background-color: red; flex: auto; min-height: 0; display: flex; flex-direction: column; } .chessboard-wrapper { position: relative; min-height: 0; margin: auto; aspect-ratio: 1; } .chessboard-wrapper > canvas { max-width: 100%; max-height: 100%; } .chessboard { position: absolute; inset: 0; background-color: purple; } .footer { height: 10px; background-color: green; flex: none; }