Petua Ketinggian Peratus HTML 5/CSS
P粉135292805
2023-08-20 19:15:25
<p>Saya cuba menetapkan <div> kepada ketinggian peratusan tertentu dalam CSS, tetapi saiznya masih sama dengan kandungan di dalamnya. Walau bagaimanapun, apabila saya mengalih keluar HTML 5 <!DOCTYTPE html>, ia berfungsi dengan baik dan <div> mengambil keseluruhan halaman seperti yang diharapkan. Saya mahu halaman itu lulus pengesahan, apakah yang perlu saya lakukan? </p>
<p>Saya mempunyai CSS ini pada <div> dan IDnya ialah <kod>halaman</code>: </p>
<pre class="brush:php;toolbar:false;">#page {
padding: 10px;
warna latar belakang: putih;
ketinggian: 90% !penting;
}</pre>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda juga perlu menetapkan ketinggian pada elemen
<html>和<body>jika tidak, ia hanya cukup besar untuk memuatkan kandungan. Sebagai contoh :<!DOCTYPE html> <title>Example of 100% width and height</title> <style> html, body { height: 100%; margin: 0; } div { height: 100%; width: 100%; background: red; } </style> <div></div>Berapakah peratusan?
Untuk menetapkan ketinggian peratusan, elemen induknya (*) mesti mempunyai ketinggian yang jelas. Ini agak jelas, jika anda membiarkan ketinggian sebagai
auto, blok akan mengambil ketinggian kandungannya... Walau bagaimanapun, jika ketinggian kandungan itu sendiri dinyatakan sebagai peratusan unsur induk, anda berada dalam sedikit dilema. Penyemak imbas menyerah dan hanya menggunakan ketinggian kandungan.Oleh itu, elemen induk div mesti mempunyai atribut
heightyang jelas. Walaupun ketinggian boleh menjadi peratusan jika anda mahu, itu hanya membawa masalah ke peringkat seterusnya.Jika anda ingin menjadikan ketinggian div sebagai peratusan ketinggian viewport, setiap elemen nenek moyang div, termasuk
<html>和<body>，都必须具有height: 100%, jadi terdapat rantaian peratusan ketinggian yang jelas kepada div.(*: Atau, jika div diletakkan, "blok yang mengandungi", unsur nenek moyang terdekat yang turut diletakkan.)
Sebagai alternatif, semua penyemak imbas moden dan IE >= 9 menyokong unit CSS baharu berbanding ketinggian port pandangan (
vh)和视口宽度(vw):div { height:100vh; }Lihat maklumat lanjut di sini.