Chúng ta cần giữ hai phần tử div cạnh nhau cùng chiều cao để khi thêm nội dung vào bất kỳ div nào, cả hai div tự động khớp chiều cao. Điều này tạo bố cục nhất quán, chuyên nghiệp ngăn chặn giao diện cột không đều.
Có một số cách tiếp cận để đạt được cột cùng chiều cao. Chúng ta sẽ khám phá các phương pháp hiệu quả nhất:
- CSS Table Display: Sử dụng
display: table-cellđể khớp chiều cao tự động - CSS Flexbox: Cách tiếp cận hiện đại với
display: flex - CSS Grid: Bố cục grid cho cột cùng chiều cao
- JavaScript: Thiết lập chiều cao theo chương trình để khớp
Vấn đề cột không cùng chiều cao: Div 1 nhiều nội dung... Div 2 chiều cao không đều! → Giải pháp: Div 1 nhiều nội dung... Div 2 cùng chiều cao! Div 1 ít nội dung Div 2 tự khớp!
Sử dụng CSS Table Display
Thuộc tính display: table-cell tự động làm cho các phần tử trong cùng hàng bảng có chiều cao bằng nhau. Đây là một trong những phương pháp đáng tin cậy nhất đa trình duyệt.
Ví dụ
<!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>Cột này có nhiều nội dung hơn để chứng minh cách cả hai cột tự động điều chỉnh cùng chiều cao.</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>Cột này có ít nội dung hơn nhưng khớp chiều cao của cột đầu tiên.</p>
</div>
</div>
</body>
</html>
Đầu ra cho thấy cả hai cột có chiều cao bằng nhau dù lượng nội dung khác nhau:
Equal Height Columns with Table Display Column 1 Column 2 Cột này có nhiều nội dung hơn để Cột này có ít nội dung hơn nhưng chứng minh cách cả hai cột tự động khớp chiều cao của cột đầu tiên. điều chỉnh cùng chiều cao. Lorem ipsum dolor sit amet... (Cả hai cột có cùng chiều cao)
Sử dụng CSS Flexbox
Flexbox là cách tiếp cận hiện đại để tạo cột cùng chiều cao. Thuộc tính align-items: stretch (mặc định) đảm bảo tất cả flex items có cùng chiều cao.
Ví dụ
<!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 tự động kéo giãn cả hai cột để khớp với cái cao nhất.</p>
<p>Cách tiếp cận này hiện đại và linh hoạt hơn table display.</p>
<p>Nó cũng hỗ trợ thiết kế responsive dễ dàng.</p>
<p>Nội dung thêm ở đây để làm cho cột này cao hơn.</p>
</div>
<div class="flex-box flex-box2">
<h3>Flex Column 2</h3>
<p>Cột này tự động khớp chiều cao của cột 1.</p>
</div>
</div>
</body>
</html>
Cách tiếp cận flexbox tạo cột responsive cùng chiều cao:
Equal Height Columns with Flexbox Flex Column 1 Flex Column 2 Flexbox tự động kéo giãn cả hai cột Cột này tự động khớp để khớp với cái cao nhất. chiều cao của cột 1. Cách này hiện đại và linh hoạt hơn... (Cả hai cột kéo giãn cùng chiều cao)
Sử dụng CSS Grid
CSS Grid cung cấp giải pháp hiện đại khác cho cột cùng chiều cao sử dụng grid-template-rows: 1fr.
Ví dụ
<!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 tạo cột cùng chiều cao mặc định khi sử dụng đơn vị phân số.</p>
<p>Phương pháp này cho kiểm soát chính xác bố cục.</p>
<p>Hoàn hảo cho bố cục phức tạp với nhiều hàng và cột.</p>
</div>
<div class="grid-box grid-box2">
<h3>Grid Column 2</h3>
<p>Tự động khớp chiều cao của grid item cao nhất trong cùng hàng.</p>
</div>
</div>
</body>
</html>
Sử dụng JavaScript
JavaScript cung cấp khớp chiều cao động có thể hữu ích khi nội dung thay đổi sau khi tải trang. Phương pháp này sử dụng jQuery để đọc và đặt chiều cao theo chương trình.
Ví dụ
<!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>Phương pháp này theo chương trình đặt chiều cao để khớp.</p>
<p>Hữu ích khi nội dung được thêm động sau khi tải trang.</p>
<p>Script tìm phần tử cao nhất và áp dụng chiều cao đó cho tất cả các cái khác.</p>
</div>
<div class="js-box js-box2" id="box2">
<h3>JavaScript Column 2</h3>
<p>Chiều cao được đặt bởi JavaScript để khớp cột 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(maxHeight);
}
function addContent() {
$("#box2").append("<p>Nội dung mới được thêm động!</p>");
equalizeHeights();
}
$(document).ready(function() {
equalizeHeights();
});
</script>
</body>
</html>
Kết luận
Có bốn phương pháp hiệu quả để giữ các div cạnh nhau cùng chiều cao: CSS Table (tương thích rộng), Flexbox (hiện đại, responsive), Grid (kiểm soát chính xác) và JavaScript (động, cho nội dung thay đổi sau tải). Flexbox và Grid được khuyến nghị cho các dự án hiện đại do sự đơn giản và khả năng responsive.