मेरे पास 3 कॉलम हैं

.bookingTotals.middleRow {
  height: 315px;
  bottom: 400px;
}

.bookingTotals.row {
  height: 400px;
  bottom: 0;
  margin-left: 920px;
  /*margin-right: 55px;*/
}
<div id "myParent">
  <div style="float: left; width: 400px;">
    //some stuff
    <div>
      <div style="float: left; width: 400px;">
        //some stuff
        <div>
          <div style="float: left; width: 400px;">
            <div style="height:50px;">
              //top stuff
            </div>
            <div class="bookingTotals middleRow">
              //middle stiff that fills the gap
            </div>
            <div class="bookingTotals row">
              //bottom stuff that i want fixed to the bottom
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

मैं अंतिम कॉलम को 3 परतों में विभाजित करना चाहता हूं जहां ऊपर और नीचे div ऊंचाई ज्ञात हैं। इसलिए मैं चाहता हूं कि बीच वाला div बीच की जगह को भर दे।

वास्तव में क्या होता है कि यह पादलेख div myParent के बाहर प्रदर्शित होता है जैसे कि इसका इससे कोई संबंध नहीं था। मैं क्या गलत कर रहा हूं?

0
Andrew Simpson 3 अक्टूबर 2018, 22:24

2 जवाब

सबसे बढ़िया उत्तर

यदि आप bottom संपत्ति का उपयोग करते हैं तो आपको position भी निर्दिष्ट करना होगा। मैंने जगह भरने के लिए calc का इस्तेमाल किया। इस तरह, बीच की पंक्ति की ऊंचाई स्क्रीन के आकार पर निर्भर करेगी।

.top-row {
  height: 50px;
  background: red;
}

.bookingTotals.middleRow {
  height: calc(100vh - 400px);
  background: orange;
}

.bookingTotals.row {
  height: 290px;
  background: yellow;
}
<div id="myParent">
  <div>
    some stuff
    <div>
      <div style="width: 400px;">
        some stuff
        <div>
          <div style="width: 400px;">
            <div class="top-row">
              top stuff
            </div>
            <div class="bookingTotals middleRow">
              middle stiff that fills the gap
            </div>
            <div class="bookingTotals row">
              bottom stuff that i want fixed to the bottom
              <div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1
user5664615 4 अक्टूबर 2018, 01:32

मैंने आपकी ऊंचाई के साथ कुछ स्वतंत्रता ली ताकि यह बेहतर दिखे।

हर चीज के लिए CSS का प्रयोग करें, मार्कअप में न डालें। उसके लिए कक्षाओं का प्रयोग करें।

मैं यह अनुमान लगाता हूं कि आप पाठ को सबसे नीचे वाले में चाहते हैं, इसलिए मैंने इसके चारों ओर एक span जोड़ा और पंक्ति के लिए flex अंत में align-self: flex-end; का उपयोग किया। समाधान की स्पष्टता के लिए पृष्ठभूमि रंग जोड़ा गया।

#myParent {
  width: 100px;
}

.rowthing {
  width: 410px;
}

.holder {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  border: solid 1px red;
}

.things {
  display: flex;
}

.topstuff {
  height: 50px;
  background-color: #ddeeee;
}

.bookingTotals.middleRow {
  flex-grow: 1;
  background-color: #dddddd;
  justify-content: space-evenly;
}

.bookingTotals.middleRow span {
  align-self: center;
}

.bookingTotals.bottom {
  height: 100px;
  background-color: #eeeedd;
  justify-content: center;
}

.bookingTotals.bottom span {
  align-self: flex-end;
}
<div id "myParent">
  <div class="rowthing">
    //some stuff1
  </div>
  <div class="rowthing">
    //some stuff2
  </div>
  <div class="rowthing holder">
    <div class="things topstuff">
      //top stuff
    </div>
    <div class="things bookingTotals middleRow">
      <span> //middle stiff that fills the gap<span>
    </div>
    <div class="things bookingTotals bottom">
      <span>bottom stuff that i want fixed to the bottom<span>
    </div>
  </div>
</div>
2
Mark Schultheiss 4 अक्टूबर 2018, 01:21