हमें दो साइड-बाय-साइड div एलिमेंट्स को समान ऊंचाई रखने की आवश्यकता है ताकि जब किसी भी div में अधिक सामग्री जोड़ी जाए, तो दोनों divs स्वचालित रूप से ऊंचाई में मेल खाएं। यह एक सुसंगत, पेशेवर लेआउट बनाता है जो असमान कॉलम उपस्थिति को रोकता है।
समान ऊंचाई कॉलम प्राप्त करने के कई दृष्टिकोण हैं। हम सबसे प्रभावी तरीकों का पता लगाएंगे:
- CSS Table Display: स्वचालित ऊंचाई मिलान के लिए
display: table-cellका उपयोग करना - CSS Flexbox:
display: flexके साथ आधुनिक दृष्टिकोण - CSS Grid: समान ऊंचाई कॉलम के लिए ग्रिड लेआउट
- JavaScript: ऊंचाइयों को प्रोग्रामेटिक रूप से मिलान करने के लिए सेट करना
CSS Table Display का उपयोग करना
display: table-cell प्रॉपर्टी स्वचालित रूप से एक ही टेबल पंक्ति में एलिमेंट्स को समान ऊंचाई देती है। यह सबसे विश्वसनीय क्रॉस-ब्राउज़र विधियों में से एक है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>समान ऊंचाई Divs - टेबल विधि</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>टेबल डिस्प्ले के साथ समान ऊंचाई कॉलम</h2>
<div class="container">
<div class="box1">
<h3>कॉलम 1</h3>
<p>इस कॉलम में अधिक सामग्री है यह प्रदर्शित करने के लिए कि दोनों कॉलम स्वचालित रूप से समान ऊंचाई पर समायोजित होते हैं।</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>कॉलम 2</h3>
<p>इस कॉलम में कम सामग्री है लेकिन पहले कॉलम की ऊंचाई से मेल खाता है।</p>
</div>
</div>
</body>
</html>
आउटपुट दिखाता है कि दोनों कॉलम अलग-अलग सामग्री मात्रा के बावजूद समान ऊंचाई के हैं:
टेबल डिस्प्ले के साथ समान ऊंचाई कॉलम कॉलम 1 कॉलम 2 इस कॉलम में अधिक सामग्री है इस कॉलम में कम सामग्री है लेकिन दिखाने के लिए कि दोनों कॉलम पहले कॉलम की ऊंचाई से मेल खाता है। स्वचालित रूप से समान ऊंचाई पर समायोजित होते हैं। Lorem ipsum dolor sit amet... (दोनों कॉलम की समान ऊंचाई)
CSS Flexbox का उपयोग करना
Flexbox समान ऊंचाई कॉलम बनाने के लिए आधुनिक दृष्टिकोण है। align-items: stretch प्रॉपर्टी (डिफ़ॉल्ट) सुनिश्चित करती है कि सभी फ्लेक्स आइटम्स की समान ऊंचाई हो।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>समान ऊंचाई Divs - Flexbox विधि</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>Flexbox के साथ समान ऊंचाई कॉलम</h2>
<div class="flex-container">
<div class="flex-box flex-box1">
<h3>फ्लेक्स कॉलम 1</h3>
<p>Flexbox स्वचालित रूप से दोनों कॉलम को सबसे लंबे से मिलान करने के लिए फैलाता है।</p>
<p>यह दृष्टिकोण टेबल डिस्प्ले से अधिक आधुनिक और लचीला है।</p>
<p>यह रिस्पॉन्सिव डिज़ाइन को भी आसानी से सपोर्ट करता है।</p>
<p>इस कॉलम को लंबा बनाने के लिए अतिरिक्त सामग्री यहाँ।</p>
</div>
<div class="flex-box flex-box2">
<h3>फ्लेक्स कॉलम 2</h3>
<p>यह कॉलम स्वचालित रूप से कॉलम 1 की ऊंचाई से मेल खाता है।</p>
</div>
</div>
</body>
</html>
Flexbox दृष्टिकोण रिस्पॉन्सिव समान-ऊंचाई कॉलम बनाता है:
Flexbox के साथ समान ऊंचाई कॉलम फ्लेक्स कॉलम 1 फ्लेक्स कॉलम 2 Flexbox स्वचालित रूप से दोनों यह कॉलम स्वचालित रूप से कॉलम को सबसे लंबे से मिलान कॉलम 1 की ऊंचाई से मेल खाता है। करने के लिए फैलाता है। यह दृष्टिकोण अधिक आधुनिक है... (दोनों कॉलम समान ऊंचाई तक फैलते हैं)
CSS Grid का उपयोग करना
CSS Grid grid-template-rows: 1fr का उपयोग करके समान ऊंचाई कॉलम के लिए एक और आधुनिक समाधान प्रदान करता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>समान ऊंचाई Divs - Grid विधि</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>CSS Grid के साथ समान ऊंचाई कॉलम</h2>
<div class="grid-container">
<div class="grid-box grid-box1">
<h3>ग्रिड कॉलम 1</h3>
<p>CSS Grid फ्रैक्शनल यूनिट्स का उपयोग करते समय डिफ़ॉल्ट रूप से समान ऊंचाई कॉलम बनाता है।</p>
<p>यह विधि लेआउट पर सटीक नियंत्रण देती है।</p>
<p>कई पंक्तियों और कॉलम वाले जटिल लेआउट के लिए बिल्कुल सही।</p>
</div>
<div class="grid-box grid-box2">
<h3>ग्रिड कॉलम 2</h3>
<p>उसी पंक्ति में सबसे लंबे ग्रिड आइटम की ऊंचाई से स्वचालित रूप से मेल खाता है।</p>
</div>
</div>
</body>
</html>
JavaScript का उपयोग करना
JavaScript डायनामिक ऊंचाई मिलान प्रदान करता है जो उपयोगी हो सकता है जब पेज लोड होने के बाद सामग्री बदलती है। यह विधि ऊंचाइयों को प्रोग्रामेटिक रूप से पढ़ने और सेट करने के लिए jQuery का उपयोग करती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>समान ऊंचाई Divs - JavaScript विधि</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>JavaScript के साथ समान ऊंचाई</h2>
<div class="js-container">
<div class="js-box js-box1" id="box1">
<h3>JavaScript कॉलम 1</h3>
<p>यह विधि ऊंचाइयों को मिलान करने के लिए प्रोग्रामेटिक रूप से सेट करती है।</p>
<p>पेज लोड के बाद सामग्री डायनामिकली जोड़े जाने पर उपयोगी।</p>
<p>स्क्रिप्ट सबसे लंबे एलिमेंट को ढूंढती है और उस ऊंचाई को अन्य सभी पर लागू करती है।</p>
</div>
<div class="js-box js-box2" id="box2">
<h3>JavaScript कॉलम 2</h3>
<p>ऊंचाई JavaScript द्वारा कॉलम 1 से मिलान करने के लिए सेट की जाती है।</p>
</div>
</div>
<button onclick="addContent()" style="padding: 10px; margin: 10px;">कॉलम 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>डायनामिकली जोड़ी गई नई सामग्री!</p>");
equalizeHeights();
}
$(document).ready(function() {
equalizeHeights();
});
</script>
</body>
</html>
