सीएसएस टेबल, फ्लेक्सबॉक्स और ग्रिड के साथ दो साइड‑बाय‑साइड डिव्ज़ को समान ऊंचाई पर रखें

<पी> हमें दो अगल-बगल div तत्वों को समान ऊंचाई पर रखने की आवश्यकता है ताकि जब किसी भी div में अधिक सामग्री जोड़ी जाए, तो दोनों div स्वचालित रूप से ऊंचाई में मेल खाते हैं। यह एक सुसंगत, पेशेवर लेआउट बनाता है जो असमान कॉलम उपस्थिति को रोकता है।

<पी> समान ऊंचाई वाले स्तंभ प्राप्त करने के लिए कई दृष्टिकोण हैं। हम सबसे प्रभावी तरीकों का पता लगाएंगे

CSS तालिका प्रदर्शन display: table-cell का उपयोग करके स्वचालित ऊंचाई मिलान के लिए
सीएसएस फ्लेक्सबॉक्स आधुनिक दृष्टिकोण display: flex के साथ
समान ऊंचाई वाले कॉलम के लिए CSS ग्रिड ग्रिड लेआउट
जावास्क्रिप्ट प्रोग्रामेटिक रूप से मिलान के लिए ऊंचाई निर्धारित कर रहा है

समान ऊँचाई वाले कॉलम समस्या डिव 1 अधिक सामग्री यहाँ... डिव 2 असमान ऊँचाई! प्रभाग 1 अधिक सामग्री यहाँ... प्रभाग 2 समान ऊँचाई! डिव 1 कम सामग्री डिव 2 स्वतः मिलान!

सीएसएस टेबल डिस्प्ले का उपयोग करना

<पी> 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)

सीएसएस फ्लेक्सबॉक्स का उपयोग करना

<पी> फ्लेक्सबॉक्स समान ऊंचाई के कॉलम बनाने का आधुनिक तरीका है। 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>

<पी> फ्लेक्सबॉक्स दृष्टिकोण प्रतिक्रियाशील समान-ऊंचाई वाले कॉलम बनाता है

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)

सीएसएस ग्रिड का उपयोग करना

<पी> सीएसएस ग्रिड 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>

जावास्क्रिप्ट का उपयोग करना

<पी> जावास्क्रिप्ट गतिशील ऊंचाई मिलान प्रदान करता है जो पृष्ठ लोड के बाद सामग्री में परिवर्तन होने पर उपयोगी हो सकता है। यह विधि 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

<पी>

सीएसएस टेबल, फ्लेक्सबॉक्स और ग्रिड के साथ दो साइड‑बाय‑साइड डिव्ज़ को समान ऊंचाई पर रखें