简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Petua Ketinggian Peratus HTML 5/CSS
P粉135292805
P粉135292805 2023-08-20 19:15:25
0
2
597
<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>
P粉135292805
P粉135292805

membalas semua(2)
P粉759451255
P粉7594512552023-08-21 18:49:34 Tingkat 2

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>
Suka +0
Tambah Balasan
P粉530519234
P粉5305192342023-08-21 00:27:22 Tingkat 1

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 height yang 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.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！