गतिशील ऊँचाई वाले माता-पिता को भरने के लिए स्ट्रैच चाइल्ड डिव हाइट

Question

जैसा कि यह निम्नलिखित फिडल में देखा जा सकता है, मेरे पास दो divएस हैं, एक माता-पिता में निहित divहै जो बड़े तलाक को शामिल करने के लिए फैला है, मेरा लक्ष्य उन बच्चों divको ऊंचाई में बराबर बनाना है ।

http://fiddle.jshell.net/y9bM4/

Comments

उन सवालों की जाँच करें: stackoverflow.com/questions/3049783/… , stackoverflow.com/questions/1575141/… , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko CSS पर कई हैं लेकिन CSS3 पर नहीं। मुझे ऐसा लगता है।

— श्री_ग्रीन

@Mr_Green "CSS" और CSS3 के बीच एक बुनियादी स्तर पर अंतर तुच्छ है, इसलिए मुझे समस्या नहीं दिखाई देती है। यह एक बहुत ही सामान्य मुद्दा है जिसे मौत के लिए कहा गया है और इसका जवाब दिया गया है।

— माइक एच।

@MikeHometchko मेरे समाधान की जाँच करें। मुझे यकीन है कि किसी ने भी पहले इसका जवाब नहीं दिया है।

— श्री_ग्रीन

Answer 1

समाधान का उपयोग करने के लिए है display: table-cellउन तत्वों लाने इनलाइन के बजाय का उपयोग करने display: inline-blockया float: left।

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

वर्किंग फिडल

Comments

यदि मूल तत्व टेबल सेल है, तो यह काम नहीं करता है।

— टॉम ज़ातो -

Answer 2

display: flexअपने divs को फैलाने के लिए उपयोग करें :

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

Answer 3

निम्नलिखित सीएसएस जोड़ें:

माता पिता के लिए div:

style="display: flex;"

बच्चे के लिए div:

style="align-items: stretch;"

Comments

मुझे stretchमेरे लिए काम करने के लिए फ्लेक्स पर बच्चों को जोड़ने की जरूरत थी ।

— BadHorsie

Answer 4

https://www.youtube.com/watch?v=jV8B24rSN5o

मुझे लगता है कि आप प्रदर्शन को ग्रिड के रूप में उपयोग कर सकते हैं:

.parent { display: grid };

Comments

क्या आपने मूल पोस्टर के समान कोड का उपयोग करके अपने उत्तर का परीक्षण किया था?

— मार्क स्टीवर्ट

यह काम करता है और बच्चे पर किसी भी सीएसएस की आवश्यकता नहीं है। ऐसा इसलिए है क्योंकि एक सीएसएस ग्रिड autoसेल में डिफ़ॉल्ट रूप से पंक्ति और सेल होगा । यह वास्तव में IE के साथ बहुत अच्छी तरह से काम करता है यदि आप display: -ms-gridकुछ फ्लेक्सबग्स से बचने के लिए उपयोग करते हैं, जब तक कि आपके पास केवल एक बच्चा है।

— शॉर्टफ्यूज

Answer 5

आप इसे थोड़ा सा jQuery के साथ आसानी से कर सकते हैं

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

Comments

हालांकि एक बार ब्राउज़र विंडो को आकार देने के बाद यह टूट जाएगा, जबकि CSS वाले अभी भी काम करेंगे।

— शार्प नोव