เราต้องการให้ Div Elements สองตัวที่วางติดกัน (Side-by-side) มีความสูงเท่ากัน เพื่อว่าเมื่อเพิ่มเนื้อหาใน Div ใด Div หนึ่ง ทั้งสอง Div จะปรับความสูงให้ตรงกันอัตโนมัติ สร้าง Layout ที่สม่ำเสมอและมืออาชีพ ป้องกันการปรากฏของ Columns ที่ไม่เท่ากัน
มีหลายแนวทางให้ความสูง Columns เท่ากัน เราจะสำรวจวิธีที่มีประสิทธิภาพที่สุด
- CSS Table Display: ใช้
display: table-cellสำหรับการจับคู่ความสูงอัตโนมัติ - CSS Flexbox: แนวทางสมัยใหม่กับ
display: flex - CSS Grid: Grid Layout สำหรับ Columns ความสูงเท่ากัน
- JavaScript: ตั้งค่าความสูงด้วยโปรแกรมให้ตรงกัน
Equal Height Columns Problem: Div 1 เนื้อเยอะ... Div 2 Uneven Heights! → Div 1 เนื้อเยอะ... Div 2 Equal Heights! → Div 1 เนื้อน้อย Div 2 Auto-matched!
ใช้ CSS Table Display
Property display: table-cell ทำให้ Elements ใน Table Row เดียวกันมีความสูงเท่ากันอัตโนมัติ นี่เป็นหนึ่งในวิธี Cross-browser ที่น่าเชื่อถือที่สุด
ตัวอย่าง
<!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>
Output แสดงทั้งสอง Column มีความสูงเท่ากันแม้เนื้อหาต่างปริมาณ
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... | (Both columns have the same height)
ใช้ CSS Flexbox
Flexbox เป็นแนวทางสมัยใหม่สำหรับสร้าง Equal Height Columns Property align-items: stretch (ค่าเริ่มต้น) รับรองว่า Flex Items ทั้งหมดมีความสูงเท่ากัน
ตัวอย่าง
<!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>
Flexbox Approach สร้าง Responsive Equal-height Columns
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 | (Both columns stretch to equal and flexible than table display. | height)
ใช้ CSS Grid
CSS Grid ให้โซลูชันสมัยใหม่อีกอย่างสำหรับ Equal Height Columns ใช้ grid-template-rows: 1fr
ตัวอย่าง
<!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
JavaScript ให้ Dynamic Height Matching ที่มีประโยชน์เมื่อเนื้อหาเปลี่ยนหลังโหลดหน้า วิธีนี้ใช้ jQuery อ่านและตั้งค่าความสูงด้วยโปรแกรม
ตัวอย่าง
<!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
