Utiliti Tinggi
Kawal tinggi dengan nilai tetap h-*, gunakan h-full untuk memenuhi induk, h-screen untuk tinggi ruang pandang, dan h-auto untuk saiz semula jadi.
Utiliti Tinggi ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Keluarga Utiliti h-*
Utiliti ketinggian dalam Tailwind mencerminkan sistem lebar. Awalan h-* mengawal ketinggian sesuatu elemen, dengan nilai yang diambil daripada skala jarak yang sama, saiz pecahan dan kata kunci semantik yang telah anda kenali daripada w-*. Berbeza daripada lebar, ketinggian berkelakuan secara berbeza dalam CSS kerana elemen blok biasanya setinggi kandungannya secara lalai — jadi utiliti ketinggian eksplisit digunakan dengan lebih terpilih.
<!-- Height examples -->
<div class="flex gap-4 items-end">
<div class="w-16 h-8 bg-blue-200 rounded">h-8</div>
<div class="w-16 h-16 bg-blue-300 rounded">h-16</div>
<div class="w-16 h-32 bg-blue-400 rounded">h-32</div>
<div class="w-16 h-48 bg-blue-500 rounded">h-48</div>
</div>Ketinggian Tetap Dengan Skala Jarak
Ketinggian tetap mengikut skala jarak 4px bagi setiap unit yang sama seperti lebar. h-4 ialah 16px, h-12 ialah 48px dan h-96 ialah 384px. Kegunaan biasa termasuk ketinggian butang (h-10 atau h-12), saiz avatar (h-8 w-8) dan garisan pemisah (h-px untuk garisan 1px). Memadankan h-* dengan w-* yang mempunyai nilai sama menghasilkan segi empat sama yang sempurna.
<!-- Square avatar shapes using equal h and w -->
<div class="flex gap-4">
<div class="h-10 w-10 rounded-full bg-emerald-400 flex items-center justify-center text-white text-sm">SM</div>
<div class="h-14 w-14 rounded-full bg-emerald-500 flex items-center justify-center text-white">MD</div>
<div class="h-20 w-20 rounded-full bg-emerald-600 flex items-center justify-center text-white">LG</div>
</div>h-full untuk Memenuhi Induk
h-full menetapkan ketinggian elemen kepada 100% ketinggian induknya. Untuk ini berfungsi, induk mestilah mempunyai ketinggian eksplisit. Ia biasanya digunakan untuk bar sisi melekat, imej utama atau menjadikan kad dalam baris flex terbentang pada ketinggian yang sama. Tanpa ketinggian eksplisit pada induk, h-full tidak memberi kesan kerana ketinggian peratusan memerlukan leluhur yang mempunyai saiz.
<!-- Sidebar fills the full height of its container -->
<div class="flex h-64">
<aside class="w-48 h-full bg-gray-800 text-white p-4">
Sidebar (h-full)
</aside>
<main class="flex-1 bg-gray-50 p-4">
Main content (natural height)
</main>
</div>h-screen dan h-dvh
h-screen menetapkan ketinggian kepada 100vh (100% daripada ketinggian ruang pandang), sesuai untuk bahagian utama skrin penuh dan rangka aplikasi. Pada pelayar mudah alih, bar alamat boleh menyebabkan 100vh melimpah. Penyelesaian moden ialah h-dvh (100dvh — ketinggian ruang pandang dinamik), yang disokong oleh Tailwind v3.4+ dan secara automatik mengambil kira elemen antara muka pelayar yang menguncup.
<!-- Classic full-screen hero section -->
<section class="h-screen bg-gradient-to-br from-indigo-600 to-purple-700 flex items-center justify-center">
<div class="text-center text-white">
<h1 class="text-5xl font-bold mb-4">Welcome</h1>
<p class="text-xl opacity-80">A full-viewport hero section</p>
</div>
</section>h-auto untuk Ketinggian Dipacu Kandungan
h-auto mengembalikan elemen kepada ketinggian semula jadinya yang dipacu kandungan selepas anda mungkin menetapkan ketinggian tetap atau peratusan pada titik henti yang lebih kecil. Sebagai contoh, h-48 md:h-auto memberikan kad ketinggian tetap pada peranti mudah alih (sesuai untuk imej kecil dalam grid), tetapi membolehkannya menyesuaikan diri secara semula jadi pada desktop apabila panjang kandungan berubah-ubah tanpa kelihatan janggal.
<!-- Fixed height on mobile, auto on desktop -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">
This content is clipped on mobile but shows fully on desktop.
It may have variable amounts of text.
</div>
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">Short text</div>
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">Medium text here</div>
</div>h-px untuk Pemisah Garis Halus
h-px menetapkan ketinggian tepat 1px, menjadikannya sesuai untuk pemisah mendatar dan garisan pemisah. Digabungkan dengan w-full bg-gray-200, ia menghasilkan pemisah kemas yang sepadan dengan sistem reka bentuk tanpa memerlukan kelas CSS tersuai. Anda juga boleh menggunakan h-0.5 untuk garisan 2px apabila 1px kelihatan terlalu nipis pada paparan berDPI tinggi.
<!-- Section dividers using h-px and h-0.5 -->
<div class="space-y-4">
<p class="text-gray-700">Content above the divider</p>
<div class="h-px w-full bg-gray-300"></div>
<p class="text-gray-700">Content below the divider</p>
<div class="h-0.5 w-full bg-gray-200"></div>
<p class="text-gray-700">More content</p>
</div>h-fit, h-min dan h-max
Seperti padanan lebarnya, h-fit menetapkan saiz elemen supaya sepadan dengan kandungannya, h-min menggunakan ketinggian kandungan minimum dan h-max menggunakan ketinggian kandungan maksimum. Utiliti ini kurang diperlukan berbanding padanan lebar kerana ketinggian biasanya dipacu oleh kandungan. Kegunaan utamanya ialah apabila elemen telah diberikan ketinggian tetap atau peratusan dan anda perlu kembali kepada saiz berdasarkan kandungan pada titik henti tertentu.
<!-- h-fit useful when resetting an explicitly set height -->
<div class="flex gap-4">
<!-- Card with a fixed minimum height on mobile -->
<div class="h-32 sm:h-fit bg-purple-100 p-4 rounded w-40">
<p>This card has fixed height on mobile</p>
<p class="hidden sm:block">And shows all this text on larger screens</p>
</div>
</div>Ketinggian Pecahan
Seperti lebar, ketinggian boleh menggunakan nilai pecahan: h-1/2, h-1/3, h-2/3, h-1/4 dan h-3/4. Nilai ini ialah peratusan yang relatif kepada ketinggian bekas induk. Ia berfungsi dengan baik dalam bekas berketinggian tetap seperti kad, panel atau bahagian rangka aplikasi apabila anda mahu elemen anak mengambil pecahan tertentu daripada ruang menegak yang tersedia.
<!-- Image takes top half, content takes bottom half -->
<div class="h-64 bg-white rounded-lg shadow overflow-hidden">
<div class="h-1/2 bg-gradient-to-r from-blue-400 to-purple-500">
<!-- Image placeholder -->
</div>
<div class="h-1/2 p-4">
<h3 class="font-bold">Card Title</h3>
<p class="text-sm text-gray-600">Card description text here.</p>
</div>
</div>Limpahan dan Pemotongan Ketinggian
Apabila kandungan lebih tinggi daripada ketinggian yang ditetapkan, kandungan itu akan melimpah secara lalai. Padankan utiliti ketinggian dengan overflow-hidden untuk memotong kandungan, overflow-y-auto untuk menambah bar tatal hanya apabila diperlukan, atau overflow-y-scroll untuk sentiasa memaparkan bar tatal. Ini penting untuk bar sisi yang boleh ditatal, tetingkap sembang dan blok kod berketinggian tetap.
<!-- Scrollable content panel with fixed height -->
<div class="h-48 overflow-y-auto border border-gray-200 rounded p-4">
<p class="mb-3">Line 1 of content</p>
<p class="mb-3">Line 2 of content</p>
<p class="mb-3">Line 3 of content</p>
<p class="mb-3">Line 4 — now we scroll</p>
<p class="mb-3">Line 5</p>
<p class="mb-3">Line 6</p>
<p>Line 7 of scrollable content</p>
</div>Gambaran Keseluruhan Ketinggian Minimum dan Maksimum
Gunakan min-h-* untuk memastikan elemen tidak pernah lebih pendek daripada nilai tertentu, dan max-h-* untuk mengehadkan ketinggian maksimumnya. min-h-screen ialah corak biasa untuk reka letak peringkat halaman yang perlu memenuhi ruang pandang walaupun kandungannya sedikit. max-h-64 bersama overflow-y-auto ialah amalan standard untuk menu lungsur dan senarai pilihan yang tidak sepatutnya menjadi terlalu tinggi.
<!-- Page fills screen height, content area scrolls if needed -->
<div class="min-h-screen flex flex-col">
<header class="bg-gray-900 text-white p-4">Header</header>
<main class="flex-1 p-6 bg-gray-50">
<!-- flex-1 makes this grow to fill remaining height -->
<p>Page content</p>
</main>
<footer class="bg-gray-200 p-4 text-center">Footer</footer>
</div>Ketinggian dalam Reka Letak Sebenar
Berikut ialah komponen kad praktikal yang menunjukkan penggunaan utiliti ketinggian. Kad ini mempunyai ketinggian imej kecil yang tetap, kawasan kandungan yang fleksibel dan pengaki berketinggian tetap dengan butang tindakan. Corak ini biasa digunakan dalam senarai produk dan halaman indeks blog, apabila keseragaman visual antara kad yang mempunyai panjang kandungan berbeza amat penting.
<div class="flex flex-col bg-white rounded-xl shadow overflow-hidden w-64">
<!-- Thumbnail: fixed height -->
<div class="h-40 bg-gradient-to-br from-sky-400 to-blue-600"></div>
<!-- Content: grows to fill available space -->
<div class="flex-1 p-4">
<h3 class="font-bold text-gray-900 mb-1">Product Name</h3>
<p class="text-sm text-gray-500">Brief product description here.</p>
</div>
<!-- Footer: fixed height with border -->
<div class="h-14 border-t flex items-center px-4">
<button class="ml-auto bg-blue-500 text-white text-sm px-3 py-1 rounded">
Buy Now
</button>
</div>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: utiliti tetap h-* mengikut skala jarak yang sama seperti w-*, h-screen memenuhi ketinggian ruang pandang dan h-dvh ialah alternatif moden yang selamat untuk mudah alih, dan min-h-screen bersama flex-col dan flex-1 menghasilkan reka letak pengaki melekat. Seterusnya, kita akan meneroka utiliti kekangan minimum dan maksimum untuk lebar serta ketinggian.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Utiliti Tinggi” percuma?
Ya — teks penuh “Utiliti Tinggi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Utiliti Tinggi”?
Kawal tinggi dengan nilai tetap h-*, gunakan h-full untuk memenuhi induk, h-screen untuk tinggi ruang pandang, dan h-auto untuk saiz semula jadi. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Utiliti Tinggi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Utiliti Lebar
- Utiliti Tinggi
- Kekangan Minimum dan Maksimum
- Nisbah Aspek