Bila hendak menggunakan `height: 100%` lwn. `min-height: 100%` dalam CSS?-tutorial css-php.cn

Bila hendak menggunakan `height: 100%` lwn. `min-height: 100%` dalam CSS?

Barbara Streisand

Lepaskan： 2024-10-31 01:11:02

asal

503 orang telah melayarinya

When to use `height: 100%` vs. `min-height: 100%` in CSS?

tinggi:100% lwn. ketinggian min:100%

Apabila cuba mengawal ketinggian elemen HTML, CSS menawarkan dua sifat penting: ketinggian dan ketinggian min. Sifat ini memainkan peranan yang berbeza dalam menentukan saiz elemen.

tinggi:100%

Menetapkan ketinggian kepada 100% menunjukkan bahawa elemen harus mengembang untuk menduduki keseluruhan ketinggian bekas induknya. Ini bermakna ketinggian elemen akan melaraskan secara dinamik berdasarkan saiz induknya.

tinggi min:100%

Sebaliknya, ketinggian min menentukan ketinggian minimum untuk sesuatu elemen. Jika ketinggian pengiraan elemen, dengan mengambil kira faktor lain seperti kandungan dan margin, adalah kurang daripada 100%, ketinggian min menguatkuasakan ketinggian 100%. Walau bagaimanapun, jika ketinggian yang dikira melebihi 100%, ketinggian min tidak mempunyai kesan.

Perbezaan Utama

Perbezaan utama antara ketinggian:100% dan ketinggian min: 100% terletak pada tingkah laku mereka apabila ketinggian pengiraan unsur kurang daripada 100%. Ketinggian:100% membolehkan elemen mengecut di bawah 100%, manakala ketinggian min:100% menghalang pengecutan ini dengan mengenakan ketinggian minimum 100%.

Contoh

Jika anda mempunyai

dengan ketinggian:100% dan tiada ketinggian min yang jelas, ia akan memenuhi keseluruhan ketinggian bekas induknya. Sebaliknya, jika anda menentukan ketinggian min:100% untuk

yang sama, ia tidak akan pernah lebih kecil daripada 100% ketinggian bekas induknya, tanpa mengira kandungan atau jidarnya.

Atas ialah kandungan terperinci Bila hendak menggunakan `height: 100%` lwn. `min-height: 100%` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Apakah Yang Benar-Benar Dilakukan Kata Kunci \"auto\" dalam Sifat CSS? Artikel seterusnya：Bagaimana untuk Mengubah Saiz Imej Secara Dinamik agar Sesuai dengan Tetingkap Penyemak Imbas?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2766

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2899

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2423

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...