두 div에 더 많은 콘텐츠가 추가되면 두 div의 높이가 자동으로 일치하도록 나란히 있는 두 개의 div 요소를 동일한 높이로 유지해야 합니다. 이렇게 하면 열 모양이 고르지 않게 방지되는 일관되고 전문적인 레이아웃이 만들어집니다.
동일한 높이의 기둥을 달성하는 데는 여러 가지 접근 방식이 있습니다. 가장 효과적인 방법을 모색하겠습니다
display: table-cell을 사용한 CSS 테이블 표시 자동 높이 일치를 위해display: flex을 사용한 CSS Flexbox 최신 접근 방식- 동일한 높이의 열에 대한 CSS 그리드 그리드 레이아웃
- JavaScript 프로그래밍 방식으로 일치하도록 높이 설정
CSS 테이블 표시 사용
display: table-cell 속성은 자동으로 동일한 테이블 행에 있는 요소의 높이를 동일하게 만듭니다. 이는 가장 신뢰할 수 있는 크로스 브라우저 방법 중 하나입니다.
예
<!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는 동일한 높이의 열을 생성하기 위한 현대적인 접근 방식입니다. align-items: stretch 속성(기본값)은 모든 플렉스 항목의 높이가 동일하도록 보장합니다.
예
<!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 접근 방식은 반응형 동일 높이 열을 생성합니다
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 그리드 사용
CSS Grid는 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는 페이지 로드 후 콘텐츠가 변경될 때 유용할 수 있는 동적 높이 일치를 제공합니다. 이 방법은 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
