内部div上的jQuery append（），同时扩展外部div，以使内部div元素适合内部

Question

I have div structure similar to this. I'm using jquery to append elements inside the div with the id append. However, the outer div doesn't expand automatically to fit the appended elements.

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

I solved the issue by increasing the height of the outer div ie

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

Is there a better way to do this?

Answer 1

You could do it with pure CSS using min-height and height:auto which causes the expand DIV to adjust its height according to its content:

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

Also add height:auto !important; to the child element for mobile support.

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

This can be done by

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

Clear property erases any float values (left or right) within the div. This prevents the expansion of width of the outer div due to float property of inner div. If you have any issue with the responsiveness, you could use some simple HTML :

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

Adding line break tag ensures that the div moves to next line across all devices.