Chúng ta cần giữ hai phần tử div cạnh nhau có cùng chiều cao để khi thêm nhiều nội dung vào một trong hai div, cả hai div sẽ tự động khớp với chiều cao. Điều này tạo ra một bố cục nhất quán, chuyên nghiệp giúp ngăn chặn sự xuất hiện của các cột không đồng đều.
Có một số cách tiếp cận để đạt được các cột có chiều cao bằng nhau. Chúng ta sẽ khám phá những phương pháp hiệu quả nhất
- Hiển thị bảng CSS bằ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 - Bố cục lưới lưới CSS cho các cột có chiều cao bằng nhau
- JavaScript Đặt độ cao theo chương trình cho phù hợp
Sử dụng Hiển thị bảng CSS
display: table-cell thuộc tính tự động làm cho các phần tử trong cùng một hàng của bảng có chiều cao bằng nhau. Đây là một trong những phương pháp đa trình duyệt đáng tin cậy nhấ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>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>
Kết quả đầu ra cho thấy cả hai cột có chiều cao bằng nhau mặc dù lượng nội dung khác nhau
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)
Sử dụng CSS Flexbox
Flexbox là phương pháp hiện đại để tạo các cột có chiều cao bằng nhau. align-items: stretch thuộc tính (mặc định) đảm bảo tất cả các mục linh hoạt 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 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>
Cách tiếp cận flexbox tạo ra các cột có chiều cao bằng nhau đáp ứng
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)
Sử dụng lưới CSS
CSS Grid cung cấp một giải pháp hiện đại khác cho các cột có chiều cao bằng nhau bằng cách 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 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>
Sử dụng JavaScript
JavaScript cung cấp khả năng 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 độ 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>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
