根据父Div设置Div Height

Question

How to set a div max-height according to parent div height change and if there is more content in parent div.

I think there is border problem and not merge with parent.

<div class="row">
    <div class="col-sm-6">
        <div clasd="row">
            <div class="col-sm-6">SET THIS DIV TO PARENT DIV HEIGHT ACCORDING #right_div DIV</div>
            <div class="col-sm-6">SET THIS DIV TO PARENT DIV HEIGHT ACCORDING #right_div DIV</div>
        </div>
    </div>
    <div class="col-sm-6" id="right_div"></div>
</div>

I try some code here: jsfiddle link It work fine with full resolution but if resolution like '480px' there is problem to set height in div.

sorry here i use inline css for demo.

Answer 1

Try like this: Demo

HTML:

<div class="row eqheight">
  <div class="col-xs-6 eqheight_col">col 1 ..</div>

  <div class="col-xs-6 eqheight_col">col 2 ..</div>
</div>

CSS:

.eqheight {
  overflow: hidden;
}

.eqheight_col{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Answer 2

Use Flexbox . it is compatible to mostly all major browser. check caniuse

 .flexy{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flexy > div{ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; word-break:break-word; } 

 <div class="row flexy" style="border-top:0;line-height:2;overflow:overlay;"> <div class="col-xs-6"> <div style="clear:both;line-height:1;"> <p class="o_editable"><b>col-1</b></p> <p><span class="o_editable o_is_inline_editable">demo FEBRICHEM P LTD</span></p> <p><span class="o_editable o_is_inline_editable">demo,PHASE-II,ID A</span></p> <p><span class="o_editable o_is_inline_editable">PLOT NO-185,PHASE-II,ID A</span></p> <p></p> </div> <div class="row flexy" style="border-top: 1px solid;line-height:1;"> <div class="col-xs-5"> <p class="o_editable">Pre-Carriage by</p> <p>demo</p> </div> <div class="col-xs-7" style="border-left: 1px solid;"> <p class="o_editable">Place of Receipt by Pre-Carrier</p> <p>carr</p> </div> </div> <div class="row flexy" style="border-top: 1px solid;clear:both;"> <div class= "col-xs-5">Vessel/Flight No. <p>4654665</p> </div> <div class="col-xs-7" style="border-left: 1px solid;">Port of Loading <p>porbandar</p> </div> </div> <div class="row flexy" style="border-top: 1px solid;clear:both;/* overflow: auto; */"> <div class="col-xs-5">Port of Discharge <p>kandla</p> </div> <div class="col-xs-7" style="border-left: 1px solid;">Final Destination <p>fhfhfh</p> </div> </div> </div> <div class="col-xs-6" style="border-left:1px solid;"> <div class="row" flexy style="clear:both;line-height:1;"> <p class="o_editable"><b>Col-2</b></p> <p><span class="o_editable o_is_inline_editable">00ALLIED FEBRICHEM P LTD</span></p> <p> PLOT NO-185,PHASE-II,IDA, PLOT NO-185,PHASE-II,IDA, </p> <p> </p> </div> <div class="row flexy" style="border-top: 1px solid;clear:both;line-height:1;"> <div class="col-xs-6" style="border-right: 1px solid;"> <p class="o_editable">Country of Origin of Goods</p> <p>India </p> </div> <div class="col-xs-6"> <p class="o_editable">Country of Final Destination</p> <p>India </p> </div> </div> <div class="row" style="border-top: 1px solid;clear:both;line-height:1;"> <div class="col-xs-12"> <p class="o_editable">Terms of Delivery and Payment</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </div> </div>