เราจำเป็นต้องรักษาองค์ประกอบ div สองรายการที่อยู่เคียงข้างกันให้มีความสูงเท่ากัน เพื่อที่ว่าเมื่อมีการเพิ่มเนื้อหาลงใน div ใดรายการหนึ่งมากขึ้น div ทั้งสองจะจับคู่ความสูงโดยอัตโนมัติ สิ่งนี้จะสร้างเลย์เอาต์ที่สม่ำเสมอและเป็นมืออาชีพซึ่งป้องกันการปรากฏตัวของคอลัมน์ที่ไม่สม่ำเสมอ
มีหลายวิธีในการทำให้คอลัมน์มีความสูงเท่ากัน เราจะสำรวจวิธีการที่มีประสิทธิภาพสูงสุด
- การแสดงตาราง CSS โดยใช้
09สำหรับการจับคู่ความสูงอัตโนมัติ - แนวทาง CSS Flexbox Modern ด้วย
15 - CSS Grid รูปแบบตารางสำหรับคอลัมน์ที่มีความสูงเท่ากัน
- JavaScript ตั้งค่าความสูงโดยทางโปรแกรมเพื่อให้ตรงกัน
การใช้การแสดงผลตาราง CSS
25 คุณสมบัติจะทำให้องค์ประกอบในแถวตารางเดียวกันมีความสูงเท่ากันโดยอัตโนมัติ นี่เป็นหนึ่งในวิธีการข้ามเบราว์เซอร์ที่น่าเชื่อถือที่สุด
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - Table Method</title>
<style>
.container {
display: table;
width: 100%;
border-spacing: 10px;
}
.box1, .box2 {
display: table-cell;
padding: 20px;
vertical-align: top;
}
.box1 {
background: #e74c3c;
color: white;
width: 50%;
}
.box2 {
background: #f39c12;
color: white;
width: 50%;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height Columns with Table Display</h2>
<div class="container">
<div class="box1">
<h3>Column 1</h3>
<p>This column has more content to demonstrate how both columns automatically adjust to the same height.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="box2">
<h3>Column 2</h3>
<p>This column has less content but matches the height of the first column.</p>
</div>
</div>
</body>
</html>
ผลลัพธ์แสดงว่าทั้งสองคอลัมน์มีความสูงเท่ากันแม้จะมีปริมาณเนื้อหาต่างกัน
Equal Height Columns with Table Display Column 1 Column 2 This column has more content to This column has less content but demonstrate how both columns matches the height of the first automatically adjust to the same column. height. Lorem ipsum dolor sit amet, consectetur adipiscing elit... (Both columns have the same height)
การใช้ CSS Flexbox
Flexbox เป็นแนวทางสมัยใหม่ในการสร้างคอลัมน์ที่มีความสูงเท่ากัน 33 คุณสมบัติ (ค่าเริ่มต้น) ช่วยให้มั่นใจว่ารายการดิ้นทั้งหมดมีความสูงเท่ากัน
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - Flexbox Method</title>
<style>
.flex-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.flex-box {
flex: 1;
padding: 20px;
color: white;
}
.flex-box1 {
background: #3498db;
}
.flex-box2 {
background: #2ecc71;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height Columns with Flexbox</h2>
<div class="flex-container">
<div class="flex-box flex-box1">
<h3>Flex Column 1</h3>
<p>Flexbox automatically stretches both columns to match the tallest one.</p>
<p>This approach is more modern and flexible than table display.</p>
<p>It also supports responsive design easily.</p>
<p>Additional content here to make this column taller.</p>
</div>
<div class="flex-box flex-box2">
<h3>Flex Column 2</h3>
<p>This column automatically matches the height of column 1.</p>
</div>
</div>
</body>
</html>
วิธีการเฟล็กบ็อกซ์สร้างคอลัมน์ที่มีความสูงเท่ากันที่ตอบสนอง
Equal Height Columns with Flexbox Flex Column 1 Flex Column 2 Flexbox automatically stretches This column automatically matches both columns to match the tallest the height of column 1. one. This approach is more modern and flexible than table display. (Both columns stretch to equal height)
การใช้ CSS Grid
CSS Grid นำเสนอโซลูชันที่ทันสมัยอีกวิธีหนึ่งสำหรับคอลัมน์ที่มีความสูงเท่ากันโดยใช้ 40 .
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - Grid Method</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.grid-box {
padding: 20px;
color: white;
}
.grid-box1 {
background: #9b59b6;
}
.grid-box2 {
background: #e67e22;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height Columns with CSS Grid</h2>
<div class="grid-container">
<div class="grid-box grid-box1">
<h3>Grid Column 1</h3>
<p>CSS Grid creates equal height columns by default when using fractional units.</p>
<p>This method gives precise control over layout.</p>
<p>Perfect for complex layouts with multiple rows and columns.</p>
</div>
<div class="grid-box grid-box2">
<h3>Grid Column 2</h3>
<p>Automatically matches the height of the tallest grid item in the same row.</p>
</div>
</div>
</body>
</html>
การใช้จาวาสคริปต์
JavaScript ให้การจับคู่ความสูงแบบไดนามิกซึ่งจะมีประโยชน์เมื่อเนื้อหาเปลี่ยนแปลงหลังจากโหลดหน้าเว็บ วิธีนี้ใช้ 55 เพื่ออ่านและตั้งค่าความสูงโดยทางโปรแกรม
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Equal Height Divs - JavaScript Method</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.js-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.js-box {
flex: 1;
padding: 20px;
color: white;
}
.js-box1 {
background: #34495e;
}
.js-box2 {
background: #16a085;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Equal Height with JavaScript</h2>
<div class="js-container">
<div class="js-box js-box1" id="box1">
<h3>JavaScript Column 1</h3>
<p>This method programmatically sets heights to match.</p>
<p>Useful when content is added dynamically after page load.</p>
<p>The script finds the tallest element and applies that height to all others.</p>
</div>
<div class="js-box js-box2" id="box2">
<h3>JavaScript Column 2</h3>
<p>Height is set by JavaScript to match column 1.</p>
</div>
</div>
<button onclick="addContent()" style="padding: 10px; margin: 10px;">Add Content to Column 2</button>
<script>
function equalizeHeights() {
var box1Height = $("#box1").height();
var box2Height = $("#box2").height();
var maxHeight = Math.max(box1Height, box2Height);
$("#box1, #box2").height
