बराबर ऊंचाई के 2 कॉलम - ट्विटर के बूटस्ट्रैप 2.0

Question

ठीक है, सभी जानते हैं कि ट्विटर का बूटस्ट्रैप एक अच्छा टूल है और उन लोगों के लिए बहुत सी चीजें आसान बनाती हैं जो मेरे जैसे, सीएसएस के बारे में बहुत कुछ नहीं जानते हैं। लेकिन, कभी-कभी, यह भी एक समस्या हो सकती है।

बात यह है कि: मैं एक निश्चित 940 पीएक्स-चौड़ा, 12 कॉलम ग्रिड केंद्रित लेआउट का उपयोग दो कॉलम के साथ कर रहा हूं, और मैं चाहता था कि दोनों कॉलम की ऊंचाई समान हो। कोड अभी इस तरह है:

<div class="container"> 
    <div class="content"> 
     <div class="row"> 
      <div class="span8 div-content"> 
       <div class="center95"> 
        <div id="notWrap"> 
         <div id="not"> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="span4 div-sidebar"> 
       <div class="center90"> 
        <div id="myPWrap"> 
         <div id="myP"> 
         </div> 
        </div> 
        <hr /> 
        <div id="otherPWrap"> 
         <div id="otherP"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer id="bottom" class="footer"> 
     <p>&copy;</p> 
    </footer> 
</div> 

आप देख सकते हैं, वहाँ कोई सामग्री के साथ divs, "MYP", "otherP" और "नहीं" की तरह हैं। वे जावास्क्रिप्ट से भरे हुए हैं, और उनमें संग्रहीत सामग्री की मात्रा भिन्न हो सकती है और, इसके कारण, कई बार एक कॉलम ("कॉलम" यहां "div-content" वर्ग और div द्वारा div द्वारा दर्शाया जाता है "div-sidebar" वर्ग के साथ) दूसरे से बड़ा होगा (मेरे विशेष मामले में, दोनों कॉलम "बड़ा" हो सकते हैं)।

यहाँ, एक तस्वीर है अगर यह मदद करता है:

असल में, बाएँ स्तंभ (<div class="span8 div-content"> कोड में) की जरूरत है सही स्तंभ (<div class="span4 div-sidebar"> कोड में) की एक ही आकार है, और इसके होने के लिए विपरीत। इसके अलावा, अगर यह मदद करता है, तो पीला भाग <div class="content"> है और सफेद पृष्ठभूमि <div class="container"> है। <div class="row"> सिर्फ दो स्तंभों का एक कंटेनर है और इसमें कोई रंग नहीं है।

मुझे पता है कि "समान ऊंचाई वाले कॉलम" समस्या वेब प्रोग्रामर के लिए एक आवर्ती समस्या है, लेकिन मैंने अभी तक किए गए समाधानों का काम नहीं किया है। मुझे वास्तव में "गलत कॉलम समाधान" पसंद नहीं है क्योंकि, क्योंकि मैं सीएसएस में नौसिखिया हूं, मैं इस तरह के कामकाज से अपील नहीं करना चाहता था। यदि संभव हो, तो मैं शुद्ध सीएसएस के साथ रहना चाहूंगा।

अग्रिम में, उन लोगों के लिए धन्यवाद जो मदद करने के इच्छुक होंगे।

Answer 1

एक है कि मुझे हमेशा के लिए काम किया है:

#myPWrap,#otherPWrap { 
    overflow:hidden; 
} 

#myP,#otherP { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

तुम भी एक मेज col में कोई तालिका में चादर और #myP बारी करने की कोशिश कर सकते हैं।

#myPWrap,#otherPWrap { 
display: table; 
} 

#myP,#otherP { 
display: table-cell; 
} 

Answer 2

मैं एक कस्टम jQuery अधिकतम प्लगइन के साथ इस हल:

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get()); 
} 

सामग्री के लिए बॉक्स अपने आंतरिक स्तंभ तत्व, सामग्री कंटेनर है आवरण कि कॉलम होते हैं:

$('.content-box').height(function() { 
    var maxHeight = $(this).closest('.content-container').find('.content-box') 
        .max(function() { 
        return $(this).height(); 
        }); 
    return maxHeight; 
}) 

उम्मीद है कि यह मदद करता है।