内側のdiv要素を内部に収めるように、内側のdivにappend（）を追加します。

Question

私はこれに似たdiv構造を持っています。私はjqueryを使用して、divの中にidを追加して要素を追加しています。ただし、外側のdivは、追加された要素に合わせて自動的に展開されません。

<div class="well" id='expand'> 
    <div class="container"> 
     <!-- some other divs --> 
    </div> 
    <div id= "append"> 
    </div> 
</div 

は、私は外の高さを高くすることで、問題を解決したのdivすなわち

var div_height = $('#expand').height(); 
$('#expand').css({"height":div_height + append_height}) 

これを行うには良い方法はありますか？

Answer 1

あなたは、その内容に応じてその高さを調整するexpand DIVを起こし、純粋なmin-heightを使用してCSSとheight:autoでそれを行うことができます。また、モバイルのサポートのための子要素にheight:auto !important;を追加

#expand{ 
    height:auto; 
    min-height:50px; 
    height:auto !important; /* for IE as it does not support min-height */ 
} 

。

Answer 2

.parent { 
 
    display: flex; 
 
    border: 2px solid #222; 
 
    flex-direction: row; 
 
    padding: 10px; 
 
} 
 

 
.parent .child { 
 
    padding-right: 10px; 
 
    flex-grow: 1; 
 
    width: 33%; 
 
} 
 

 
.parent .child:last-child { 
 
    padding-right: 0; 
 
} 
 

 
.parent .child .content { 
 
    border: 1px solid blue; 
 
    height: 100%; 
 
} 
 

 
.parent .child:first-child .content { 
 
    border: 1px solid red; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="content"> 
 
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
 
     blah blah blah blah blah blah blah blah 
 
    </div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="content">Div 2</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div class="content">Div 3</div> 
 
    </div> 
 
</div>

Answer 3

消去性がDIV内の浮動小数点の値（左または右）を消去

#expand{ 
height: auto; 
clear: both; 
} 

によってこれを行うことができます。これにより、内側divのfloatプロパティによる外側divの幅の拡大を防止します。あなたが応答性を持つ任意の問題が発生した場合 、あなたはいくつかの簡単なHTMLを使用できます。改行タグを追加する

<div class="well" id='expand'> 
    <div class="container"> 
     <div><!-- content --></div> 
     <br> 
     <div><!-- content --></div> 
    </div> 
    <div id= "append"> 
    </div> 
</div> 

をdiv要素は、すべてのデバイス間で次の行に移動することを保証します。