Cara Menetapkan Ketinggian Elemen HTML hingga 100%

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 a

ketinggian: 100px;

akan mengambil 100 piksel ruang menegak dalam reka bentuk anda. Tidak kira berapa besar tetingkap penyemak imbas 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 akan menjadi 50 piksel yang tinggi, iaitu 50% elemen induknya.

Mengapa Peratusan Heights Gagal

Jika anda merancang halaman web, dan anda mempunyai lajur yang anda ingin mengambil ketinggian penuh tetingkap, kecenderungan semulajadi adalah untuk menambah

ketinggian: 100%;
kepada unsur itu. Lagipun, jika anda menetapkan

lebar
kepada

lebar: 100%;
elemen akan mengambil ruang mendatar penuh halaman, jadi

ketinggian
harus bekerja 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.

lebar
Jika anda tidak menetapkan sebarang nilai pada dokumen anda, penyemak imbas secara automatik mengalirkan kandungan untuk mengisi keseluruhan lebar tetingkap (lebar 100% adalah lalai).

Nilai ketinggian dikira berbeza daripada lebarnya. Malah, pelayar tidak menilai ketinggian sama ada kandungannya terlalu lama sehingga ia keluar dari viewport (dengan itu memerlukan bar skrol) atau jika pereka web menetapkan mutlak untuk elemen pada halaman.

ketinggian
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 elemen induk tanpa ditetapkan - dengan kata lain, unsur induk mempunyai lalai.

ketinggian: 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 ibu bapa 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 tersebut benar-benar ada dua elemen induk:

dan. Untuk menentukan ketinggian

div
ke ketinggian relatif, anda mesti menetapkan ketinggian

badan
dan

html
unsur-unsur juga. Oleh itu, 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 scrollbar. 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

auto,
scrollbar akan muncul jika mereka diperlukan tetapi hilang apabila mereka 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.