【CSS】การตั้งค่าความสูงขององค์ประกอบให้เป็น 100%｜การใช้ h-100 และ h-50
คู่มือนี้อธิบายวิธีการตั้งค่าความสูงขององค์ประกอบให้เป็น 100% โดยใช้คลาส CSS h-100 และ h-50 เมื่อทำเช่นนี้ ความสูงขององค์ประกอบจะถูกปรับให้ตรงกับความสูงของคอนเทนเนอร์หลัก
🔹 ตัวอย่างโค้ด
<div class="container">
<div class="h-100">องค์ประกอบนี้จะมีความสูง 100%.</div>
<div class="h-50">องค์ประกอบนี้จะมีความสูง 50%.</div>
</div>
<style>
.container {
height: 300px;
}
.h-100 {
height: 100%;
}
.h-50 {
height: 50%;
}
</style>
💻 โค้ดสมบูรณ์ที่ทำงานได้ (คัดลอกและวางเพื่อใช้งาน)
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>องค์ประกอบที่มีความสูง 100% และ 50%</title>
<style>
.container {
height: 300px;
border: 2px dashed #000;
}
.h-100 {
height: 100%;
background-color: #90EE90;
padding: 1rem;
}
.h-50 {
height: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="h-100">องค์ประกอบนี้จะมีความสูง 100%.</div>
<div class="h-50">องค์ประกอบนี้จะมีความสูง 50%.</div>
</div>
</body>
</html>
🧩 การใช้งานและการประยุกต์ใช้
height: 100%; เป็นวิธีพื้นฐานในการปรับความสูงขององค์ประกอบให้ตรงกับความสูงของคอนเทนเนอร์หลัก ซึ่งมีประโยชน์โดยเฉพาะเมื่อคุณต้องการให้องค์ประกอบครอบคลุมความสูงทั้งหมดของคอนเทนเนอร์หลัก
📱 การออกแบบที่ตอบสนอง
h-100 เป็นเครื่องมือที่มีประสิทธิภาพมากในการออกแบบที่ตอบสนอง เมื่อใช้ h-100 คุณสามารถปรับความสูงขององค์ประกอบให้เหมาะสมกับขนาดหน้าจอต่างๆ เช่น บนอุปกรณ์เคลื่อนที่
การใช้คลาสนี้จะช่วยให้ความสูงขององค์ประกอบปรับตามคอนเทนเนอร์หลัก ทำให้การออกแบบแนวตั้งมีความสอดคล้องมากขึ้น
คัดลอกแล้ว!