¿Cómo hacer que un padre div crezca con sus hijos?

¿Cómo hago que crezca un DIV padre/contenedor a medida que se agregan más DIV para niños?¿Cómo hacer que un padre div crezca con sus hijos?

<div id="container"> 
    <div id="child" style="height:100px;"> 
    </div> 
    <div id="child2" style="height:100px;"> 
    </div> 
</div>

Fuente

2011-01-15 funk-shun

¿No es eso un comportamiento predeterminado? – Orbling

lo es, pero ¿cómo lo hago para que crezca con sus hijos? por ejemplo, si #container tenía un borde y quería que ese borde creciera automáticamente con lo que ponga en él. –

Orbling dice que crece con sus hijos por defecto. – BoltClock

La única razón por la que su div padre no quería crecer con su contenido es si su contenido es absoluto posicionadas o está utilizando flotadores, en el primer caso no hay nada que puede hacer corto de cambiar su tamaño con javascript, en este último se puede poner el siguiente código al final de sus elementos flotantes:

<br style="clear: both">

Así lo dicen tanto los elementos secundarios en el ejemplo tienen un flotador, el código se vería así

<div id="container"> 
    <div id="child" style="height:100px;"> 
      ** CONTENT GOES HERE ** 
      <br style="clear: both"> 
    </div> 
    <div id="child2" style="height:100px;"> 
      ** CONTENT GOES HERE ** 
      <br style="clear: both"> 
    </div> 
</div>

Puede usar cualquier nodo, siempre que use "borrar: ambos" en él (así que <div style="clear: both"></div> también funcionaría).

Fuente

2011-01-15 01:46:38 Naatan

en lugar de usando '
', puede agregar 'overflow: hidden' al estilo' # container'. – BoltClock

@BoltClock que ocultaría cualquier contenido que desborde la altura del elemento principal ... a menos que se refiera a un truco que desconozco, en cuyo caso; díganos más :) – Naatan

Agregar 'overflow: hidden' funciona porque muchos elementos DOM ignoran por completo la configuración de altura, a menos que se indique explícitamente que lo hagan. Usar 'overflow: hidden' solo funcionará en niños que están flotando. –

Si flota el contenido dentro de su <div>, no se expandirá. Puede solucionarlo fácilmente colocando el estilo overflow:hidden CSS al padre <div>. Tenga en cuenta que esto no funcionará si los niños están completamente posicionados. Cuando posiciona absolutamente un elemento, lo quita del flujo de documentos. En lo que respecta al posicionamiento, ese elemento ya no es un "niño", aunque semánticamente todavía lo es.

<div style="overflow:hidden"> 
    <div style="float:left"> 
    <!--Content--> 
    </div> 
    <div style="float:left"> 
    <!--Content--> 
    </div> 
</div>

Fuente

2011-01-15 01:53:20

+1: La parte de CSS de mi cerebro ahora ... está volada. – Spoike

¡Esto es asombroso! ¡He usado tantos trabajos largos en el pasado! –

Uso de display: table en el div principal lo hace crecer incluso si su contenido es un elemento flotante. Hace que el div se comporte como una mesa, básicamente.

echar un vistazo para las propiedades de la pantalla: http://www.w3.org/wiki/CSS/Properties/display

Fuente

2013-11-04 18:13:44 Jorge

Por lo general, puedo crear una clase de solución:

.clearfix{clear:both;}

Entonces, siempre se puede utilizar que cuando es necesario.

<div class='wrapperContainer'> 
    <div class="classFloated"> 
     Content 
    </div> 
    <div class="clearfix"></div> 
    <div class="classFloated"> 
     Content 
    </div> 
    <div class="clearfix"></div> 
</div>

Fuente

2015-08-21 15:06:30 thelimarenan

¿Cómo hacer que un padre div crezca con sus hijos?

Respuesta

Cuestiones relacionadas