根據父Div設置Div Height

Question

如何根據父級div的高度變化以及父級div中是否有更多內容來設置div的最大高度。

我認為有邊界問題，不能與父母合並。

<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>

我在這里嘗試一些代碼： jsfiddle鏈接在全分辨率下可以正常工作，但是如果分辨率為'480px'，則在div中設置高度會有問題。

抱歉，在這里我使用內聯CSS進行演示。

Answer 1

嘗試這樣： 演示

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

使用Flexbox 。 它與大多數主流瀏覽器兼容。 檢查犬

 .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>