Jquery append() sur le div interne tout en développant le div externe de sorte que les éléments div intérieurs rentrent

Question

J'ai une structure div similaire à celle-ci. J'utilise jquery pour ajouter des éléments dans la div avec l'id append. Cependant, la div externe ne se développe pas automatiquement pour s'adapter aux éléments ajoutés.

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

Je résolu le problème en augmentant la hauteur de l'extérieur div savoir

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

Y at-il une meilleure façon de le faire?

Answer 1

Vous pouvez le faire avec CSS pur en utilisant min-height et height:auto qui provoque la expand DIV pour régler sa hauteur en fonction de son contenu:

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

ajouter également height:auto !important; à l'élément enfant pour support mobile.

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

Cela peut être fait par

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

propriété Effacer efface toutes les valeurs flottantes (gauche ou droite) dans le div. Cela empêche l'expansion de la largeur de la div externe en raison de la propriété float de div interne. Si vous avez un problème avec la réactivité, vous pouvez utiliser du HTML simple:

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

Ajout balise de saut de ligne assure que la div se déplace à la ligne suivante sur tous les appareils.