根据父Div

Question

如何根据父div高度变化设置div max-height，以及父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 link 它可以在全分辨率下正常工作，但如果分辨率如同“480px＆＃39;在div中设置高度存在问题。

抱歉，我使用内联css进行演示。

Answer 1

请尝试以下操作： 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

使用Flexbox。它与大多数主流浏览器兼容。检查caniuse

＆＃13;

＆＃13;

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

＆＃13;

<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,I D A</span></p>
            <p><span class="o_editable o_is_inline_editable">PLOT NO-185,PHASE-II,I D 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,I D A, PLOT NO-185,PHASE-II,I D A,
            </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>

＆＃13;

＆＃13;

＆＃13;