मेरे पास निम्नलिखित मार्कअप है। footer-info वर्ग में कुछ स्टाइल है कि मैं प्रत्येक कॉलम के अंदर समान ऊंचाई होना चाहता हूं, भले ही कितना टेक्स्ट मौजूद हो।

मैं जहां संभव हो कॉलम कक्षाओं में शैली लागू नहीं करना चाहता, और यदि संभव हो तो मैं इसके लिए सापेक्ष/पूर्ण स्थिति से बचना पसंद करूंगा। क्या कोई सुरुचिपूर्ण समाधान है?

मैं जो परिणाम चाहता हूं वह प्रत्येक footer-info के लिए मूल पंक्ति (समान ऊंचाई कॉलम) की ऊंचाई को भरने के लिए है।

मैंने इसे एक jsfiddle में रखा है: https://jsfiddle.net/ntxc305e/

.container-fluid {
  padding-right: 2rem;
  padding-left: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.col-md {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

.footer-info {
  background-color: rgba(36, 36, 36, 0.8);
  color: #f7f7ef;
  padding: 20px;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-md">
      <div class="footer-info">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum.
        </p>
      </div>
    </div>
    <div class="col-md">
      <div class="footer-info">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique explicabo mollitia quas, unde deserunt aperiam ipsam non distinctio totam officiis incidunt enim soluta odio saepe. Ullam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus suscipit voluptas nobis ad sit beatae, quaerat, harum reiciendis autem rerum est molestiae. Quisquam optio rerum consequuntur doloribus corporis suscipit aliquid!</p>
      </div>
    </div>
    <div class="col-md">
      <div class="footer-info">
        <p>Small column</p>
      </div>
    </div>
  </div>
</div>
1
user319940 3 नवम्बर 2019, 22:12

1 उत्तर

आपके द्वारा पोस्ट किए गए jsfiddle उदाहरण के साथ, समाधान वास्तव में आश्चर्यजनक रूप से सरल है! आपके उदाहरण में row एक फ्लेक्स कंटेनर है, और col-md तत्व उसके फ्लेक्स आइटम हैं। फ्लेक्स आइटम के बारे में महत्वपूर्ण बात यह है कि वे अपने कंटेनर की ऊंचाई भरते हैं, जिसका अर्थ है कि आपके सभी col-md आइटम लंबवत रूप से row भरते हैं और इस प्रकार पहले से ही समान ऊंचाई के हैं। उसी समय आपके footer-info तत्व हमेशा col-md तत्वों के प्रत्यक्ष बच्चे होते हैं, जिसका अर्थ है कि केवल एक चीज जो आपको करने की ज़रूरत है वह है footer-info की ऊंचाई को 100% तक भरने के लिए सेट करना उनके माता-पिता (col-md) ऊंचाई। मैंने यहां आपके लिए एक सरलीकृत उदाहरण बनाया है:

.row {
  display: flex;
  justify-content: space-around;
}

.col-md {
  flex-basis: 30%;
}

.footer-info {
  box-sizing: border-box;
  background-color: rgba(36, 36, 36, 0.8);
  color: #f7f7ef;
  padding: 20px;
  height: 100%;
}
<div class="row">
  <div class="col-md">
    <div class="footer-info">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sunt, vero, minima perspiciatis sit autem natus aspernatur labore pariatur dicta aut iure eum doloremque suscipit dolorum, temporibus reiciendis. Veniam, nostrum.
      </p>
    </div>
  </div>
  <div class="col-md">
    <div class="footer-info">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum recusandae qui accusamus similique
      </p>
    </div>
  </div>
  <div class="col-md">
    <div class="footer-info">
      <p>Small column</p>
    </div>
  </div>
</div>
1
ajobi 10 नवम्बर 2019, 21:00