hacer que la altura de div se expanda con su contenido

Tengo estos divs nesteds y necesito que el contenedor principal se expanda (en altura) para acomodar los DIV dentro

 ...   

CSS es esto:

 * { padding: 0; margin: 0; } .main { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #4c5462; margin: 0; padding: 0; text-align: center; color: #000000; } .main #container { height: auto; width: 46em; background: #4c5462; margin: 0 auto; border: 0px solid #000000; text-align: left; } .main #main_content { padding: 5px; margin: 0px; } #items_list { width: 400px; float: left; } .items_list { width: 400px; float: left; } .item_details { margin-top: 3px; margin-bottom: 3px; padding: 3px; float: left; border-bottom: 0.5px solid blue; } 

El problema que tengo es que #main_content no se estira para acomodar todos los divs internos, con el resultado de que continúan en contra del fondo.

¿Como puedo resolver esto?

Necesitas forzar un clear:both antes de que el div #main_content esté cerrado. Probablemente movería el
;
en el div #main_content y establece el CSS para que sea:

 .clear { clear: both; } 

Actualización: esta pregunta todavía recibe bastante tráfico, así que quería actualizar la respuesta con una alternativa moderna usando un nuevo modo de diseño en CSS3 llamado cuadros flexibles o Flexbox :

 body { margin: 0; } .flex-container { display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #3F51B5; color: #fff; } section.content { flex: 1; } footer { background-color: #FFC107; color: #333; } 
 

Header

Content

Footer

Intenta esto: overflow: auto;

Funcionó para mi problema …

agregue lo siguiente:

 overflow:hidden; height:1%; 

a tu div principal Elimina la necesidad del
extra para el claro.

como alternativa, también puedes probar esto que puede ser útil en algunas situaciones

 display:table; 

jsFiddle

Yo solo usaría

 height: auto; 

en tu div. Sí, sé que llegué un poco tarde, pero pensé que esto podría ayudar a alguien como si me hubiera ayudado si estuviera aquí.

Lo siguiente debería funcionar:

 .main #main_content { padding: 5px; margin: 0px; overflow: auto; width: 100%; //for some explorer browsers to trigger hasLayout } 

Use la etiqueta span con display:inline-block css de display:inline-block adjunto. A continuación, puede utilizar CSS y manipularlo como un div de muchas maneras, pero si no incluye un width o height se expande y retrae en función de su contenido.

Espero que ayude.

Por lo general, creo que esto se puede resolver forzando un clear:both reglas sobre el último elemento hijo de la #items_list .

Puedes usar:

 #items_list:last-child {clear: both;} 

O bien, si está utilizando un lenguaje dynamic, agregue una clase adicional al último elemento generado en cualquier ciclo que cree la lista, de modo que termine con algo en su html como:

 

y css

 .last_list_item {clear: both; } 

Este problema surge cuando los elementos secundarios de una Div matriz se flotan. Aquí está la última solución del problema:

En su archivo CSS, escriba la siguiente clase llamada .clearfix junto con el pseudo selector : después

 .clearfix:after { content: ""; display: table; clear: both; } 

Luego, en su HTML, agregue la clase .clearfix a su Div principal. Por ejemplo:

 

Debería funcionar siempre Puede llamar al nombre de clase como .group en lugar de .clearfix , ya que hará que el código sea más semántico. Tenga en cuenta que no es necesario agregar el punto o incluso un espacio en el valor del Contenido entre la comilla doble “”. Además, desbordamiento: automático; podría resolver el problema pero causa otros problemas como mostrar la barra de desplazamiento y no es recomendable.

Fuente: Blog de Lisa Catalano y Chris Coyier

agregue una propiedad flotante al #main_content div – luego se expandirá para contener sus contenidos flotantes

Parece que esto funciona

 html { width:100%; height:auto; min-height:100% } 

Toma el tamaño de la pantalla como mínimo, y si el contenido se expande, crece.

Antes de hacer algo, compruebe las reglas de CSS con:

 { position:absolute } 

Eliminar si existen y no los necesitan.

Los elementos flotantes no ocupan el espacio dentro del elemento principal, ¡ya que el nombre sugiere que floten! Por lo tanto, si no se proporciona explícitamente una altura a un elemento que tiene flotados sus elementos secundarios, entonces el elemento padre parecerá encogerse y parecerá que no acepta las dimensiones del elemento hijo, también si su overflow:hidden; dado overflow:hidden; sus hijos pueden no aparecer en la pantalla. Hay varias formas de lidiar con este problema:

  1. Inserte otro elemento debajo del elemento flotante con clear:both; propiedad, o use clear:both; encendido :after del elemento flotante.

  2. Usar display:inline-block; o flex-box lugar de float .

En CSS: #clear_div{clear:both;}

Después de la etiqueta div del div interno agrega este nuevo div siguiente

 

http://www.w3schools.com/cssref/pr_class_clear.asp : para más información

Agregué Bootstrap a un proyecto con tags de section que había configurado al 100% de la altura de la pantalla. Funcionó bien hasta que logré que el proyecto respondiera, y en ese momento tomé prestada parte de la respuesta de jennyfofenny para que el fondo de mi sección coincidiera con el fondo del contenido cuando el tamaño de la pantalla cambiaba en pantallas más pequeñas.

Mi nueva section CSS se ve así:

 section { // min-height so it looks good on big screen // but resizes on a small-screen min-height: 100%; min-height: 100vh; width:100%; width:100vh; } 

Digamos que tienes una sección de cierto color. Al usar min-height , si el ancho de la sección se reduce debido a una pantalla más pequeña, la altura de la sección se ampliará, el contenido permanecerá dentro de la sección y su fondo permanecerá en el color deseado.

Me encontré con esto en un proyecto yo mismo: tenía una tabla dentro de un div que se dertwigba desde el fondo del div. Ninguno de los arreglos de altura que probé funcionaron, pero encontré una solución extraña para él, y eso es poner un párrafo en la parte inferior del div con solo un punto. Luego, aplique un estilo al “color” del texto para que sea el mismo que el fondo del contenedor. Trabajó ordenado como lo desea y no requiere Javascript. Un espacio sin interrupciones no funcionará, ni tampoco una imagen transparente.

Aparentemente solo necesitaba ver que había algo de contenido debajo de la mesa para poder estirarlo y contenerlo. Me pregunto si esto funcionará para cualquier otra persona.

Este es el tipo de cosa que hace que los diseñadores recurran a diseños basados ​​en tablas: la cantidad de tiempo que he invertido en descifrar estas cosas y hacer que sea compatible con varios navegadores me está volviendo loco.

Intenté esto y funcionó

 

Si está utilizando la interfaz de usuario de jQuery, ya tienen una clase que funciona solo como un encanto. Agregue un

en la parte inferior del div que desea expandir con la height:auto; a continuación, agregue un nombre de clase ui-helper-clearfix o use este atributo de estilo y añada lo siguiente:

 

agrega la clase jQuery UI al div claro, no al div que deseas expandir.

Sé que esto es una especie de hilo viejo, sin embargo, esto se puede lograr con la propiedad de CSS de min-height una manera limpia, así que lo dejaré aquí para futuras referencias:

Hice un violín basado en el código publicado OP aquí: http://jsfiddle.net/U5x4T/1/ , como eliminar y agregar divs en el interior, se dará cuenta de cómo se expande o se reduce el tamaño del contenedor

Las únicas 2 cosas que necesita para lograr esto, además del código OP son:

* Desbordamiento en el contenedor principal (requerido para los divs flotantes)

* propiedad min-height css, más información disponible aquí: http://www.w3schools.com/cssref/pr_dim_min-height.asp

Pantalla agregada: en línea con el div y creció automáticamente (no las cosas de desplazamiento) cuando el contenido de altura se hizo más grande que la altura div establecida de 200 px

¿Has probado la forma tradicional? dar la altura del contenedor principal: auto

 #container{height:auto} 

Lo he usado y me ha funcionado la mayoría de las veces.

Manera muy simple

En el DIV de padres:

height: 100%;

Este trabajo para mí todo el tiempo

No es necesario usar mucho CSS, solo use bootstrap, luego use:

 class="container" 

para el div que necesita ser llenado

Puede obtener el arranque desde aquí

    Intereting Posts