hacer que la altura del div se expanda con su contenido

376

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

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

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_contentno se estira para acomodar todos los divs internos, con el resultado de que continúan en el fondo.

¿Cómo puedo resolver este problema teniendo en cuenta el escenario anterior?

css  height 
— Patricio
fuente
55
Chicos, gracias a todos por las respuestas! la mejor solución para mi caso específico fue codificar una BR para borrar ambos lados (gracias Jennyfofenny y también Ricebowl) De todos modos, también otras soluciones han funcionado: poner desbordamiento: auto estaba bien, y flotante #main_content también estaba bien (aunque ir reducido el ancho de ese div al tamaño de divs secundarios). Ahora que soy un novato, me pregunto: ¿estas soluciones tienen inconvenientes o puedo usarlas indiferentemente? (por ejemplo, quizás uno de ellos no funciona con IE6, o similar ...)
— patrick
1
@Patrick, si desea desarrollar aún más su pregunta, haga clic en el enlace 'editar' (debajo del texto actual de la pregunta) y agregue las preguntas adicionales. La Convención sugiere usar algo como <strong>Edited</strong>$Reason_for_revising_question...Es posible que deba cambiar el título de la pregunta para reflejar los cambios si hay un cambio importante o una adición en su enfoque. =)
— David dice que reinstale a Monica el
44
Tampoco cerraste la divetiqueta con id='container'. Eso podría causar algunos problemas.
— Batkins
@patrick, tampoco tienes el CSS para la .clearclase. ¿Lo olvidó o está en su código original? La .clearclase sobre eso bres muy importante como @jennyfofenny menciona en su respuesta.
— Cannicidio

Respuestas:

281

Necesita forzar a clear:bothantes de que #main_contentse cierre el div. Probablemente movería <br class="clear" />;al #main_contentdiv y establecería el CSS para que sea:

.clear { clear: both; }

Actualización: esta pregunta aún recibe una buena cantidad de tráfico, por lo que quería actualizar la respuesta con una alternativa moderna utilizando un nuevo modo de diseño en CSS3 llamado cajas 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;
}
<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>
Expandir fragmento

La mayoría de los navegadores modernos actualmente admiten unidades Flexbox y viewport , pero si tiene que mantener la compatibilidad con navegadores más antiguos, asegúrese de verificar la compatibilidad para la versión específica del navegador.

— jennyfofenny
fuente
44
Aquí está el artículo de w3schools sobre la propiedad CSS clear. Básicamente, claro significa que el elemento al que se aplica el claro comienza debajo de los flotadores en su flujo (ya sea solo a la izquierda, solo a la derecha o ambos).
— jennyfofenny
230

Prueba esto: overflow: auto;

Funcionó para mi problema ...

— sipőcz péter
fuente
10
+1, esta solución es elegante y no agrega una etiqueta invisible a su página. Vea este violín: jsfiddle.net/XmKrm/1
— Nabil Kadimi
55
desbordamiento automático funcionó bien para mí. Para su información, esto agregará una barra de desplazamiento si la altura del contenedor automático de desbordamiento es menor que el contenido dentro. Califíquelo también o configure la altura: automático junto con el desbordamiento.
— Bryan Myers
@ Roozbeh15 agregar display: block;con él
— BadAtPHP
2
La mejor y más fácil solución ... Me salvaste el día. Gracias
— Kashyap Kotak
santo shet esto funcionó maravillosamente. ¿A alguien le importa explicar el mecanismo subyacente de por qué esto funcionó?
— Merkurial
86

agregue lo siguiente:

overflow:hidden;
height:1%;

a su div principal. Elimina la necesidad de un extra <br />para el claro.

— Mella
fuente
¡Guauu! eso hizo exactamente lo contrario de lo que esperaba! desbordamiento: oculto = expandir para adaptarse al contenido! ¡Nunca lo habría adivinado!
— mulllhausen
Sí, esto también funcionó para mí y no tiene sentido por qué. ¿Alguna explicación de por qué funcionan la 'altura 1%' y el 'desbordamiento oculto'?
— acarlon el
1
realmente cómo funciona e incluso por qué funciona, si no se establece la altura, ¿por qué el desbordamiento oculto no solo oculta todo (porque la altura es 0) sino que se expande, ¿hay alguna explicación o simplemente cree y se feliz?
— Max Yari
1
desbordamiento: oculto oculta las barras de desplazamiento pero mantiene el tamaño del bloque
— authentictech
funcionó para mí con solo 'overflow: hidden' pero 'overflow: auto' también funcionó y no mostró barras de desplazamiento.
— Whirlwind991
60

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

display:table;

jsFiddle

— h0mayun
fuente
24

Yo solo usaría

height: auto;

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

— Charles
fuente
height: auto;hace que todos los elementos a continuación se muevan a la parte superior. Con esta propiedad en mi div de contenido principal, el pie de página de mi página se mueve hacia arriba para que toque el encabezado y se superponga a mi div de contenido.
— Aaron Franke
1
Esta fue la solución para mí. ¡Gracias!
— Nik Hammer-Ellis
14

Lo siguiente debería funcionar:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
— Steerpike
fuente
agregar desbordamiento: auto trabajado, aunque si agrego también ancho: 100%, eso hace que el div (#main_content) sea un poco más grande que su div padre. ¡No entendí por qué!
— patrick
2
eso se debe a que el relleno cuenta además del ancho especificado, por lo que el ancho de su elemento es 100% + 5 píxeles de relleno izquierdo + 5 píxeles de relleno derecho
— NickV
1
desbordamiento: auto; funcionó para mí, muchas gracias veddy.
— Cosco Tech
8

Use la etiqueta span con display:inline-blockcss adjunta. Luego puede usar CSS y manipularlo como un div de muchas maneras, pero si no incluye un widthoheight se expande y se retrae en función de su contenido.

Espero que ayude.

— orujo oscuro
fuente
Tu esperanza funcionó: ¡al menos me ayudó! :) Por cierto, dejé mi elemento como a div(en lugar de a span) pero display: inline-blockaún funcionó en mi caso (Chromium).
— snapfractalpop
6

Por lo general, creo que esto se puede resolver forzando una clear:bothregla sobre el último elemento secundario de #items_list.

Puedes usar:

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

O, si está utilizando un lenguaje dinámico, agregue una clase adicional al último elemento generado en cualquier ciclo que cree la lista en sí, para que termine con algo en su html como:

<div id="list_item_20" class="last_list_item">

y css

.last_list_item {clear: both; }
— David dice que reinstale a Mónica
fuente
6

Este problema surge cuando los elementos Child de un Div Parent se hacen flotar. 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:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Debería funcionar siempre. Puede llamar al nombre de la 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 de Contenido entre la comilla doble "". Además, desbordamiento: auto;puede resolver el problema pero causa otros problemas como mostrar la barra de desplazamiento y no se recomienda.

Fuente: Blog de Lisa Catalano y Chris Coyier

— Ifti Mahmud
fuente
5

agregue una propiedad flotante al #main_contentdiv; luego se expandirá para contener su contenido flotante

— Rayo
fuente
Gracias Ray, esto funcionó aunque redujo el div al tamaño de su contenido (#items_list) que tiene un ancho: 400px; Su solución sería realmente buena si pudiera hacer que #main_content permanezca en todo su ancho, ¿alguna sugerencia?
— patrick
@Ray 2 y un poco años después, esto me ahorró un posible dolor de cabeza con un problema similar. ¡Gracias!
— John H
4

Antes de hacer nada, verifique las reglas de CSS con:

{ position:absolute }

Eliminar si existe y no los necesita.

— onalbi
fuente
2
Porque "los elementos posicionados absolutos se eliminan del flujo, por lo que otros elementos los ignoran. Por lo tanto, no se puede establecer la altura de los padres de acuerdo con un elemento ubicado de manera absoluta". stackoverflow.com/questions/12070759/…
— Federico
4

Los elementos flotantes no ocupan el espacio dentro del elemento padre, como su nombre indica, ¡flotan! Por lo tanto, si no se proporciona explícitamente una altura a un elemento que tiene sus elementos secundarios flotantes, entonces el elemento principal parecerá encogerse y parecerá que no acepta las dimensiones del elemento secundario, también si se le da a overflow:hidden;sus elementos secundarios que no aparecen en la pantalla. Hay varias formas de lidiar con este problema:

  1. Inserte otro elemento debajo del elemento flotante con clear:both;la propiedad o el uso clear:both;en :afterel elemento flotante.

  2. Usar display:inline-block;o en flex-boxlugar de float.

— Apoorv Srivastava
fuente
3

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.

— Sustancia MX
fuente
2

Agregué Bootstrap a un proyecto con sectionetiquetas que había establecido al 100% de la altura de la pantalla. Funcionó bien hasta que hice el proyecto de respuesta, y en ese momento me prestó parte de jennyfofenny 's respuesta así que mi sección de antecedentes igualada fondo del contenido cuando el tamaño de la pantalla cambia en pantallas más pequeñas.

Mi nuevo sectionCSS 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. Mediante el usomin-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 expandirá, el contenido permanecerá dentro de la sección y su fondo seguirá siendo el color deseado.

— Adrian
fuente
2

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

#container{height:auto}

He usado esto y funcionó la mayoría de las veces conmigo.

— Michelle Dimwaite
fuente
1

Me encuentro con esto en un proyecto yo mismo: tenía una mesa dentro de un div que se derramaba desde el fondo del div. Ninguna de las correcciones de altura que probé funcionó, pero encontré una solución extraña para eso, y eso es poner un párrafo en la parte inferior del div con solo un punto. Luego, diseñe el "color" del texto para que sea el mismo que el fondo del contenedor. Funcionó ordenadamente a su antojo y no requiere JavaScript Un espacio sin interrupciones no funcionará, ni una imagen transparente.

Aparentemente, solo necesitaba ver que hay algo de contenido debajo de la tabla para estirarlo y contenerlo. Me pregunto si esto funcionará para alguien más.

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

— Nancy Hastings-Trew
fuente
Debe haber alguna forma de hacer esto con CSS, pero no tengo idea de lo que sería. Esto funcionó para mí, pero tuve que agregar ancho: 100%; altura: auto; altura mínima: 100%; posición: relativa;
— RationalRabbit
1

Intenté esto y funcionó

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
— Ahmed Aboelela
fuente
0

Si está utilizando jQuery UI, ya tienen una clase que funciona solo un encanto, agregue un <div>en la parte inferior dentro del div con el que desea expandir, height:auto; luego agregue un nombre de clase ui-helper-clearfix o use este atributo de estilo y agregue como a continuación :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

agregue la clase jQuery UI al clear div, no el div que desea expandir.

— Lucas M. Oliveira
fuente
0

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

Hice un violín basado en el código OP publicado aquí: http://jsfiddle.net/U5x4T/1/ , a medida que elimine y agregue divs dentro, notará cómo el contenedor se expande o reduce de tamaño

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

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

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

— Juan Carlos Alpizar Chinchilla
fuente
0

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

— Jelle
fuente
1
Esta no es una respuesta clara a la pregunta. Para comentarios, utilice la función de comentarios.
— ksbg
0

Puedes usar CSS Grid Layout . El soporte es bastante amplio en este momento: verifíquelo en caniuse .

Aquí está el ejemplo en jsfiddle. También ejemplo con toneladas de cosas de texto.

Código HTML:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

Código CSS: 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff
— Sharikov Vladislav
fuente
0

Intenté casi todas las sugerencias enumeradas anteriormente y ninguna funcionó. Sin embargo, "display: table" me sirvió.

— PongDios
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.