Soalan yang sering ditanya dalam reka bentuk laman web adalah "bagaimana anda menetapkan ketinggian elemen hingga 100%"?
Ini mungkin kelihatan seperti jawapan yang mudah. Anda hanya menggunakan CSS untuk menetapkan ketinggian elemen hingga 100%, tetapi ini tidak selalu meregangkan elemen itu agar sesuai dengan keseluruhan tetingkap penyemak imbas. Mari mengetahui mengapa ini berlaku dan apa yang boleh anda lakukan untuk mencapai gaya visual ini.
Piksel dan Peratusan
Apabila anda menentukan ketinggian elemen menggunakan sifat CSS dan nilai yang menggunakan piksel, elemen tersebut akan mengambil ruang menegak yang banyak di pelayar.
Sebagai contoh, perenggan dengan ketinggian: 100px; akan mengambil 100 piksel ruang menegak dalam reka bentuk anda.Ia tidak kira betapa lebih besar tetingkap pelayar anda, elemen ini akan menjadi 100 piksel.
Peratusan bekerja berbeza daripada piksel. Menurut spesifikasi W3C, ketinggian peratusan dikira berkenaan dengan ketinggian bekas. Jadi jika anda meletakkan perenggan dengan ketinggian: 50%; di dalam div dengan ketinggian 100px, perenggan itu akan menjadi 50 piksel yang tinggi, iaitu 50% elemen induk itu.
Mengapa Peratusan Heights Gagal
Jika anda merancang halaman web, dan anda mempunyai lajur yang anda ingin mengambil ketinggian penuh tetingkap, kecenderungan semula jadi adalah untuk menambahkan ketinggian: 100%; kepada unsur itu. Lagipun, jika anda menetapkan lebar ke lebar: 100%; elemen akan mengambil ruang huluan penuh halaman, jadi ketinggian harus berfungsi sama, kan? Malangnya, ini tidak sama sekali.
Untuk memahami mengapa ini berlaku, anda mesti memahami bagaimana penyemak imbas menafsirkan ketinggian dan lebar. Pelayar web mengira jumlah lebar yang tersedia sebagai fungsi sejauh mana tetingkap penyemak imbas dibuka. Sekiranya anda tidak menetapkan sebarang nilai lebar pada dokumen anda, penyemak imbas secara automatik mengalirkan kandungan untuk mengisi keseluruhan lebar tetingkap (lebar 100% adalah lalai).
Nilai ketinggian dikira berbeza daripada lebar. Sebenarnya, pelayar tidak menilai ketinggian sama ada kandungannya terlalu lama sehingga ia keluar dari viewport (dengan itu memerlukan bar skrol) atau jika pereka web menetapkan ketinggian mutlak untuk elemen pada halaman. Jika tidak, penyemak imbas hanya membolehkan aliran kandungan dalam lebar paparan viewport sehingga ia sampai ke penghujungnya. Ketinggiannya tidak dikira sama sekali.
Masalah berlaku apabila anda menetapkan ketinggian peratusan pada elemen yang mempunyai unsur induk tanpa menetapkan ketinggian - dengan kata lain, unsur induk mempunyai ketinggian lalai: auto; . Anda, pada dasarnya, meminta penyemak imbas untuk mengira ketinggian daripada nilai yang tidak ditentukan. Oleh kerana itu akan sama dengan nilai nol, hasilnya ialah pelayar tidak melakukan apa-apa.
Jika anda ingin menetapkan ketinggian pada halaman web anda untuk peratusan, anda perlu menetapkan ketinggian setiap elemen induk yang anda mahu ketinggian ditentukan. Dengan kata lain, jika anda mempunyai laman seperti ini:
Kandungan di sini
Anda mungkin mahu div dan perenggan di dalamnya mempunyai ketinggian 100%, tetapi div itu sebenarnya mempunyai dua unsur induk:
dan. Untuk menentukan ketinggian div ke ketinggian relatif, anda mesti menetapkan ketinggian elemen badan dan html juga.
Jadi, anda perlu menggunakan CSS untuk menetapkan ketinggian bukan sahaja div, tetapi juga elemen badan dan html. Ini boleh menjadi satu cabaran, kerana anda dapat dengan cepat mendapat kewalahan dengan semua yang ditetapkan hingga ketinggian 100%, hanya untuk mencapai kesan yang diingini ini.
Beberapa Perkara Yang Perlu Diperhatikan Apabila Bekerja dengan 100% Heights
Sekarang anda tahu cara menetapkan ketinggian unsur halaman anda menjadi 100%, boleh menarik keluar dan melakukan itu ke semua halaman anda, tetapi ada beberapa perkara yang perlu anda ketahui:
- Margin dan padding boleh menambah bar tatal di mana anda tidak mahu. Salah satu perkara yang paling menjengkelkan yang saya dapati dengan bekerja dengan tahap peratusan (dan lebar) ialah padding dan margin pada unsur-unsur yang sama boleh menambah bar skrol ke halaman, walaupun semua kandungan dipaparkan tanpa memerlukan bar skrol. Ini kerana ketinggian atau lebar unsur adalah perkara pertama yang dikira. Kemudian margin dan paddings ditambah. Oleh itu, jika anda mempunyai elemen dengan ketinggian 100% dan margin atas dan bawah 10 piksel setiap satu, akan ada bar tatal untuk tambahan 20 piksel. Ingat, model kotak CSS menambah margin, sempadan, dan padding ke saiz elemen, jadi 100% dengan mana-mana nilai model kotak lain sebenarnya akan melebihi 100%.
- Jika kandungan anda mengambil lebih daripada ketinggian yang ditetapkan, ia akan menimpa apa-apa selepas itu. Dengan kata lain, jika anda mempunyai reka bentuk dengan lajur yang tinggi 80%, dan kandungan yang berada di dalamnya akan mengambil 100% ketinggian, bahawa tambahan 20% akan terus di bawah lajur dan memecahkan reka bentuk visual halaman anda. Jika ada kandungan di bawah lajur itu, teks itu akan hanya menulis di atasnya. Saya sering melihat ini berlaku apabila seorang pereka web cuba untuk memaksa ketinggian halaman dan menjadikannya berfungsi dengan sempurna untuk dilancarkan, tetapi apabila kandungan pada halaman itu berubah pada masa depan, ketinggian mutlak mereka sepenuhnya melanggar aliran halaman. Ini adalah benar-benar benar apabila anda membina laman web responsif yang lebar dan ketinggian mesti berubah dengan saiz viewport.
Untuk membetulkannya, anda boleh menetapkan ketinggian elemen tersebut juga. Jika anda menetapkannya secara automatik, bar skrol akan muncul jika ia diperlukan tetapi hilang apabila tidak. Itu membetulkan rehat visual, tetapi ia menambahkan scrollbar di mana anda mungkin tidak menginginkannya.
Menggunakan Unit Viewport
Satu lagi cara yang anda boleh menangani cabaran ini adalah untuk mencuba dengan Unit Viewport CSS. Dengan menggunakan unit ukuran ketinggian viewport , anda boleh mengukur elemen untuk meninggikan ketinggian yang ditentukan dari viewport, dan itu akan berubah apabila perubahan viewport berubah! Ini adalah cara yang bagus untuk mendapatkan visual ketinggian 100% pada halaman tetapi tetap mempunyai fleksibel untuk peranti dan saiz skrin yang berbeza.