मैं एक ही ऊँचाई के दो किनारे कैसे रखता हूँ?

Question

मेरे पास दो डिवीजन हैं। मैं चाहूंगा कि उनमें से ऊँचाई समान हो, और यदि उनमें से एक का आकार बदलता है तो वही रहें। मैं हालांकि यह पता नहीं लगा सकता। विचार?

मेरे भ्रामक प्रश्न को स्पष्ट करने के लिए, मैं चाहूंगा कि दोनों बॉक्स हमेशा एक ही आकार के हों, इसलिए यदि कोई बढ़ता है क्योंकि पाठ को इसमें रखा गया है, तो दूसरे को ऊंचाई से मेल खाने के लिए बढ़ना चाहिए।

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>

Comments

क्या आप चाहते हैं कि अगर उनमें से एक बड़ा हो रहा है, तो दूसरे की तुलना में एक ही ऊंचाई का आकार रहेगा?

— वाई वोंग

एक उदाहरण जो एक समाधान नहीं है, लेकिन एक संपादन योग्य वातावरण में है, यहां पाया जा सकता है: jsfiddle.net/PCJUQ

— MvanGeest

जावास्क्रिप्ट का उपयोग करें: stackoverflow.com/questions/3275850/…

— सी। हरेक

Answer 1

flexbox

Flexbox के साथ यह एक एकल घोषणा है:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

पुराने ब्राउज़र के लिए उपसर्ग आवश्यक हो सकते हैं, देखें ब्राउज़र समर्थन ।

Comments

flexbox एक आकर्षण की तरह काम किया। यदि आप एक उत्तरदायी डिजाइन विकसित कर रहे हैं और आप चाहते हैं कि आपकी दूसरी डिव छोटे स्क्रीन में नीचे जाए, तो आपको प्रदर्शित करने के लिए .row को सेट करना होगा: ब्लॉक; आपके मीडिया प्रश्न में

— निक ज़ुलु

@ निकज़ुलु का मानना ​​है कि इस मामले में आपको सेट होना चाहिए flex-direction: column: jsfiddle.net/sdsgW/1

— Pavlo

@ Eckstein यह दोनों समाधानों के लिए आवश्यक नहीं है। डेमो देखें

— पावलो

यह मेरे लिए तब तक काम नहीं कर रहा था जब तक मैंने ऊंचाई नहीं जोड़ दी: 100%; बच्चों के कॉलम में

— जैकब रेकुआ

क्या एक विशिष्ट बच्चे को दूसरे की ऊंचाई निर्धारित करना संभव है? ताकि यदि अन्य बाल विभूतियों की सामग्री बदल रही है, तो वह उस विशिष्ट div की ऊँचाई को नहीं बदल सकती है

— नारेक मलखासन

Answer 2

यह एक सामान्य समस्या है जिसका कई लोगों ने सामना किया है, लेकिन सौभाग्य से एड एलियट के ब्लॉग पर कुछ स्मार्ट दिमागों ने अपने समाधान ऑनलाइन पोस्ट किए हैं।

मूल रूप से आप जो भी करते हैं, दोनों divs / column को बहुत लंबा जोड़ते हैं padding-bottom: 100%और फिर "ब्राउज़र को चकरा देते हैं" यह सोचकर कि वे उस लम्बे उपयोग के नहीं हैं margin-bottom: -100%। यह एड एलियट द्वारा अपने ब्लॉग पर बेहतर तरीके से समझाया गया है, जिसमें कई उदाहरण भी शामिल हैं।

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

Comments

वन ट्रू लेआउट पर स्पष्टीकरण थोड़ा खराब था, लेकिन पहले लिंक की जाँच करने के बाद मैंने इसे अपने द्वारा उपयोग किए गए उदाहरणों में से एक पर लागू किया। हालाँकि यह वास्तव में बुरा है क्योंकि आपको कॉलम की निचली सीमा का प्रतिनिधित्व करने के लिए एक छवि का उपयोग करना होगा, और यह क्रॉस-ब्राउज़र समर्थन के लिए संदिग्ध है। हालांकि यह काम करता है और यह जावास्क्रिप्ट पर भरोसा नहीं करता है, इसलिए मैं इसे सही के रूप में चिह्नित करने जा रहा हूं। धन्यवाद!

— NIBlyPig

यह पुराने IE ब्राउज़रों में काम नहीं करता है (हाँ, दुर्भाग्य से मुझे अभी भी IE6 का समर्थन करना है)। इसे संगत बनाने का कोई तरीका?

— strongriley

@strongriley चेकआउट एड एलियट का ब्लॉग: ejeliot.com/blog/61 यह IE6 में काम करना चाहिए। हो सकता है कि समस्या कहीं और हो?

— मकचन

यह टूट जाता है अगर खिड़की बहुत संकीर्ण है और डिव को एक दूसरे के नीचे रखा गया है।

— WhyNotHugo

आप उस सेल पैडिंग को कैसे परिभाषित करते हैं जिसे आप वास्तव में टेबल सेल में प्रस्तुत करना चाहते हैं, उदाहरण के लिए padding: 7px 10px, यदि padding-bottomसंपत्ति 100% पर सेट है? (PS overflow:hiddenमेरे लिए भी आवश्यक था row)

— user1063287

Answer 3

यह एक ऐसा क्षेत्र है जहाँ CSS का वास्तव में कोई समाधान नहीं है - आप उपयोग करने के लिए नीचे हैं <table> टैग करने के (या सीएसएस display:table*मूल्यों का उपयोग करके उन्हें फीका कर रहे हैं), क्योंकि यह एकमात्र स्थान है जहां "तत्वों का एक गुच्छा समान ऊंचाई" लागू किया गया था।

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

यह फ़ायरफ़ॉक्स, क्रोम और सफारी के सभी संस्करणों में काम करता है, ओपेरा कम से कम संस्करण 8 से, और IE में संस्करण 8 से।

Comments

यह समाधान उन लोगों के लिए उपलब्ध नहीं है जिन्हें IE6 / IE7 का समर्थन करने की आवश्यकता है, लेकिन मेरा मानना ​​है कि यह सबसे साफ है।

— ट्व्सफेफ

यह जवाब सही है! बस एक छोटा सा रिमाइंडर: ऐसा हो सकता है कि कुछ क्लाइंट को "टेबल-रो" के बजाय "टेबल" की आवश्यकता हो

— टिब्कोर

@ user2025810: aw, धन्यवाद। क्या आपको पता है कि tableइसके बजाय किन क्लाइंट्स की आवश्यकता है table-row?

— पॉल डी। वेट

@ user2025810: yikes, यह नहीं कह सकता कि मैंने कभी उस में परीक्षण किया है :) हालांकि, यह जानने के लिए अच्छा है, चीयर्स। (इसके पीडीएफ फोकस को देखते हुए मैं शर्त लगाता हूं कि यह सीएसएस 2.1 के कुछ प्रिंट-संबंधित सुविधाओं का समर्थन करता है जो ब्राउज़रों में बहुत अच्छी तरह से लागू नहीं होते हैं।)

— पॉल डी। वेट

इस समाधान के साथ - widthअपने divs के लिए प्रतिशत का उपयोग करने के बारे में भूल जाएं , जब तक कि आप display: tableमूल तत्व पर नहीं जोड़ते हैं , जो चीजों को गड़बड़ कर देगा।

— एलेक्स जी

Answer 4

JQuery का उपयोग करना

JQuery का उपयोग करके, आप इसे सुपर सरल एक-लाइन-स्क्रिप्ट में कर सकते हैं।

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

CSS का उपयोग करना

यह थोड़ा और दिलचस्प है। तकनीक को फॉक्स कॉलम कहा जाता है । कम या ज्यादा आप वास्तव में एक ही होने के लिए वास्तविक ऊंचाई निर्धारित नहीं करते हैं , लेकिन आप कुछ ग्राफिकल तत्वों को रिग करते हैं ताकि वे समान ऊंचाई दिखें ।

Comments

मुझे लगता है कि जावास्क्रिप्ट का उपयोग करना एक बहुत अच्छी विधि है। समस्या यह है - अगर यह अक्षम हो जाता है। मुझे लगता है कि मैं वैसे भी इसका उपयोग करूंगा और सर्वश्रेष्ठ आकस्मिकता का निर्माण कर सकता हूं; -) धन्यवाद!

— निकोलसियस

इसका तात्पर्य यह है कि columnOne की ऊँचाई हमेशा columnTwo से बड़ी होती है।

— सेबास्टियन रिच

उनके लिए ऊंचाई लागू करने से पहले आपको कॉलम की ऊंचाई की तुलना करनी चाहिए। मुझे लगता है कि js इस समस्या के लिए सबसे अच्छा तरीका है, लगभग सभी ब्राउज़र js सक्षम हैं, यदि नहीं, तो उन्हें आपकी वेबसाइट और कई अन्य वेबसाइटों से बाहर निकलना चाहिए।

— सलमानशारती

यह भी केवल तभी काम करेगा जब पेज पहले लोड हो। यदि खिड़की को फिर से आकार दिया जाता है, जिससे divs का आकार बदल जाता है तो वे सिंक में नहीं रहेंगे

— ikariw

Answer 5

मुझे आश्चर्य है कि किसी ने भी (बहुत पुरानी लेकिन विश्वसनीय) निरपेक्ष कॉलम तकनीक का उल्लेख नहीं किया है: http://24ways.org/2008/absolute-columns/

मेरी राय में, यह फॉक्स कॉलम और वन ट्रू लेआउट की तकनीक दोनों से कहीं बेहतर है।

सामान्य विचार यह है कि एक तत्व position: absolute;के पास निकटतम मूल तत्व के खिलाफ स्थिति होगी position: relative;। फिर आप एक स्तंभ खिंचाव दोनों एक बताए द्वारा 100% ऊंचाई को भरने के लिए top: 0px;और bottom: 0px;यहाँ एक उदाहरण है (या जो भी पिक्सल / प्रतिशत आप वास्तव में जरूरत है।):

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

Comments

यदि दाएं कॉलम में बाईं ओर से अधिक लाइनें हैं, तो सामग्री अतिप्रवाह है।

— डेविड

Answer 6

आप पूरा करने के लिए Jquery के समान हाइट्स प्लगइन का उपयोग कर सकते हैं, यह प्लगइन्स अन्य के समान सटीक ऊँचाई के सभी विभाजनों को बनाता है। यदि उनमें से एक बढ़ता है और अन्य भी बढ़ेगा।

यहाँ कार्यान्वयन का एक नमूना है

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

लिंक यहां दिया गया है

http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 7

आप अशुद्ध कॉलम का उपयोग कर सकते हैं ।

मूल रूप से यह दो समान ऊँचाई वाले DIV का अनुकरण करने के लिए DIV युक्त पृष्ठभूमि छवि का उपयोग करता है। इस तकनीक का उपयोग करने से आप अपने कंटेनरों में छाया, गोल कोनों, कस्टम बॉर्डर या अन्य कायरता पैटर्न जोड़ सकते हैं।

केवल निश्चित-चौड़ाई वाले बॉक्स के साथ काम करता है।

अच्छी तरह से बाहर का परीक्षण किया और हर ब्राउज़र में ठीक से काम कर रहा है।

Answer 8

बस इसी जवाब की खोज करते हुए इस धागे को देखा। मैंने अभी एक छोटा jQuery फ़ंक्शन बनाया है, आशा है कि यह मदद करता है, एक आकर्षण की तरह काम करता है:

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

एचटीएमएल

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

Comments

मैंने पैडिंग और बॉर्डर को शामिल करने के लिए आउटरहाइट का इस्तेमाल किया। यह सबसे साफ उपाय है जो मुझे लगता है।

— सेबेस्टियन रिच

सही समाधान मैं ढूंढ रहा था। अन्य समाधान मामले के लिए अच्छे हैं कि एक पंक्ति में कुछ कॉलम हैं लेकिन यह दृष्टिकोण जटिल HTML सामग्री के लिए बेहतर है। छोटा जोड़ना: जब दस्तावेज़ उत्तरदायी पृष्ठ में आकार बदलता है, तो सामग्री की ऊँचाई निश्चित के कारण नहीं बदलती है। तो, मैंने $ ('इनर') जोड़ा। css ({ऊँचाई: "प्रारंभिक"}); डिफ़ॉल्ट रूप से ऊंचाई निर्धारित करने के लिए 'प्रत्येक फ़ंक्शन' से पहले।

— bafsar

Answer 9

सीएसएस ग्रिड रास्ता

ऐसा करने का आधुनिक तरीका (जो <div class="row"></div>प्रत्येक दो मदों के आसपास एक आवरण घोषित करने से भी बचता है ) सीएसएस ग्रिड का उपयोग करना होगा। यह आपकी आइटम पंक्तियों / स्तंभों के बीच अंतराल पर आपको आसान नियंत्रण भी देता है।

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}

<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>

Answer 10

यह सवाल 6 साल पहले पूछा गया था, लेकिन यह आजकल फ्लेक्सबॉक्स लेआउट के साथ एक सरल जवाब देने के लिए योग्य है।

पिता के लिए बस निम्नलिखित सीएसएस जोड़ें <div>, यह काम करेगा।

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

पहली दो पंक्तियाँ घोषित करती हैं कि इसे फ्लेक्सबॉक्स के रूप में प्रदर्शित किया जाएगा। और flex-direction: rowब्राउज़रों को बताता है कि उसके बच्चे कॉलम में प्रदर्शित होंगे। और align-items: stretchइस आवश्यकता को पूरा करेगा कि सभी बच्चे तत्व उसी ऊंचाई तक खिंचेंगे जो उनमें से एक उच्चतर हो जाएगा।

Comments

@ टायलरएच ने कहा कि उनके प्रश्न को संपादित किया है और जोड़ा है I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.जिसका उल्लेख स्वीकार्य उत्तर में नहीं है ... मैंने यहां पूरा किया। शायद मुझे स्वीकृत उत्तर पर टिप्पणी करनी चाहिए थी?

— हेग्विन

यह स्पष्ट रूप से उल्लेख नहीं किया गया है क्योंकि यह पहले से ही सरल सीएसएस घोषणा द्वारा पहले से ही कवर किया गया है। पूर्णस्क्रीन में उत्तर के स्निपेट को खोलें और देखने के लिए अपनी ब्राउज़र विंडो का आकार बदलें; वे एक-दूसरे के आकार के समान हैं।

— टायलरएच

भले ही स्वीकृत उत्तर फ्लेक्सबॉक्स का उपयोग करता है, यह एक अलग दृष्टिकोण है। संरेखित-आइटम: खिंचाव वह है जो मुझे एक विशेष स्थिति में मेरी समस्या को हल करने के मार्ग पर स्थापित करता है।

— बेनोइटुएलियर

क्या align-items: stretch;फ्लेक्स डिफ़ॉल्ट नहीं है?

— मडाव

Answer 11

सीएसएस फ्लेक्सबॉक्स और न्यूनतम ऊंचाई का उपयोग करके मेरे लिए काम किया

कहते हैं कि आपके पास एक कंटेनर है जिसमें दो divs हैं और आप चाहते हैं कि उन दोनों divs की ऊंचाई समान हो।

आप कंटेनर पर ' प्रदर्शन: फ्लेक्स ' और साथ ही ' संरेखित-आइटम: खिंचाव ' सेट करेंगे

फिर बस बच्चे को 100% की ' न्यूनतम ऊंचाई ' पर दें

नीचे दिए गए कोड को देखें

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}

<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>

Answer 12

यदि आप divएक मास्टर होने के बारे में बुरा नहीं मानते हैं और दोनों के लिए ऊंचाई तय कर divरहे हैं तो यह है:

बेला

कोई बात नहीं, divदाईं ओर का विस्तार होगा या बाईं ओर की ऊंचाई से मेल खाने के लिए स्क्विश और ओवरफ्लो होगा div।

दोनों divको एक कंटेनर के तत्काल बच्चे होने चाहिए, और इसके भीतर अपनी चौड़ाई निर्दिष्ट करनी होगी।

प्रासंगिक सीएसएस:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}

Answer 13

मैं इसे प्राप्त करने के लिए छद्म तत्वों का उपयोग करना पसंद करता हूं। आप इसे सामग्री की पृष्ठभूमि के रूप में उपयोग कर सकते हैं और उन्हें स्थान भरने दे सकते हैं।

इन दृष्टिकोणों से आप कॉलम, बॉर्डर आदि के बीच मार्जिन सेट कर सकते हैं।

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}

<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

Answer 14

दी फील

एचटीएमएल

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

सीएसएस

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}

Answer 15

मैंने ऊपर वर्णित लगभग सभी तरीकों की कोशिश की है, लेकिन फ्लेक्सबॉक्स समाधान सफारी के साथ सही ढंग से काम नहीं करेगा, और ग्रिड लेआउट तरीके IE के पुराने संस्करणों के साथ सही ढंग से काम नहीं करेंगे।

यह समाधान सभी स्क्रीन पर फिट बैठता है और क्रॉस-ब्राउज़र संगत है:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

उपरोक्त विधि कोशिकाओं की ऊँचाई के बराबर होगी, और मोबाइल या टैबलेट जैसी छोटी स्क्रीन के लिए, हम @mediaऊपर वर्णित विधि का उपयोग कर सकते हैं ।

Answer 16

इसे आसानी से प्राप्त करने के लिए आप jQuery का उपयोग कर सकते हैं।

सीएसएस

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

एचटीएमएल

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

आपको jQuery शामिल करना होगा

Comments

यदि दोनों में <div>गतिशील सामग्री है तो यह काम नहीं करेगा । मेरे कहने का कारण यह है कि यदि <div class="right">अधिक सामग्री है कि दूसरी समस्या उत्पन्न होती है।

— सूर्या

Answer 17

मुझे पता है कि यह एक लंबा समय रहा है, लेकिन मैं अपना समाधान वैसे भी साझा करता हूं। यह एक jQuery ट्रिक है।

--- एचटीएमएल

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- सीएसएस

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- रोजी

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>

Answer 18

यह एक jQuery प्लगइन है जो सभी तत्वों के लिए समान पंक्ति (तत्व के ऑफसेट.टॉप की जांच करके) के बराबर ऊंचाई सेट करता है। इसलिए यदि आपके jQuery सरणी में एक से अधिक पंक्ति (अलग ऑफ़सेट) के तत्व हैं, तो प्रत्येक पंक्ति में एक अलग ऊँचाई होगी, जो उस पंक्ति पर अधिकतम ऊँचाई वाले तत्व पर आधारित होगी।

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

Answer 19

    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });

Comments

कृपया अपने उत्तर के लिए किसी भी टिप्पणी की आपूर्ति करें।

— 22

Answer 20

मैं एक ही समस्या हो रही थी तो मैं jquery का उपयोग कर इस छोटे समारोह बनाया क्योंकि jquery आजकल हर वेब अनुप्रयोग का हिस्सा है।

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

आप इस फ़ंक्शन को पेज रेडी इवेंट पर कॉल कर सकते हैं

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

मुझे उम्मीद है कि यह आपके लिए काम करेगा।

Answer 21

मैं हाल ही में इस पार आया था और वास्तव में समाधान पसंद नहीं था इसलिए मैंने प्रयोग करने की कोशिश की।

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

Answer 22

<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

मैंने यहां जो किया वह ऊंचाई को न्यूनतम ऊंचाई में बदलना है और इसे एक निश्चित मूल्य दिया है। यदि उनमें से एक का आकार परिवर्तन हो रहा है तो दूसरा उसी ऊंचाई पर रहेगा। सुनिश्चित नहीं हैं कि यह वही है जो आप चाहते हैं

Comments

ओपी चाहता था कि डिव हमेशा एक ही ऊंचाई पर हों।

— साइमन फोर्सबर्ग