Expandir el contenedor principal con 100% de altura para tener en cuenta el contenido flotante

Estoy luchando con un proyecto de cliente. Todos mis div s no tienen posicionamiento absoluto, height:100% para html , body y div contenedor, y aún el contenido estático se detiene antes de su contenido (a 910px).

Puedo cambiar la propiedad de desbordamiento a auto , y el fondo continuará hasta el final del contenido, pero agrega una barra de desplazamiento, y el borde inferior del div contenido estático permanece en el mismo lugar (a 910 px).

ACTUALIZACIÓN: el enlace de desarrollo ya no era válido, así que lo eliminé. Basta con decir que la explicación exhaustiva de Animuson es la parte valiosa de este hilo, y resolvió el problema de los contenedores que no se expanden para hacer coincidir su contenido. – Ty

Usó la propiedad de overflow-y incorrecta para limpiar, y debe establecer una min-height lugar de una altura normal. Prueba esto:

 #static-content { background-color: #FFFFFF; margin: 0 auto; min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */ overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */ position: relative; width: 960px; } 

Contenido flotante por sí mismo

Dado este recuadro verde que tiene un relleno de 20 píxeles (para la visibilidad), observe cómo un solo recuadro rojo flotando hacia la izquierda se expandirá más allá del límite de su recuadro principal. Esto se debe a que el contenido flotante no ocupa ningún “espacio” en el área visual. Todos los demás elementos se expandirán debajo de él, y solo el texto lo envolverá.

Ejemplo 1

Borrar contenido flotante en la matriz

Para contrarrestar esto y hacer que el recuadro verde abarque por completo el área de su recuadro rojo para niños, podemos agregar overflow: hidden a sus estilos. Esto ampliará la caja lo suficiente.

Ejemplo 2

Expandiendo el padre a 100% de altura

Podría pensar que simplemente agregando height: 100% es la forma más sencilla de hacerlo expandirse a donde debe estar. Sin embargo, la propiedad de height especifica una altura absoluta. Dado que el contenido que se flota no ocupa ningún espacio vertical, nuestro overflow: hidden propiedad overflow: hidden cortará todo el contenido que sobrepase la altura del padre.

Ejemplo 3

Usar una altura mínima en su lugar

Como queremos que se expanda a al menos un 100% de altura, podemos usar la propiedad min-height para forzarlo y mantener la altura “automática” necesaria para que el cuadro verde primario abarque por completo el cuadro rojo secundario, dejándolo empuje más allá del 100% solo cuando también lo necesite.

Ejemplo 4

Cómo se estableció

Todos los elementos, de forma predeterminada, están configurados como overflow: visible para que la propiedad realmente no cambie nada. La única diferencia que tuvo entre este y el primer ejemplo que proporcioné fue que tenía una height: 100% establecido en el elemento. Por lo tanto, el padre se estaba expandiendo al 100% de altura pero aún no abarcaba la altura completa de su cuadro rojo para niños.

Ejemplo 5

Si la altura: 100% no funciona bien para usted, puede probar esta función calc de CSS3:

 /* Firefox */ height: -moz-calc(100%); /* WebKit */ height: -webkit-calc(100%); /* Standard */ height: calc(100%); 

Puede probar esto con altura o con altura mínima, como ya se dijo. Puedes con estas funciones calc también otros cálculos como:

  height: -moz-calc(100% - 50px); 

Y esto a veces es muy útil, como puedes imaginar.

Si tiene que usar desbordamiento: visible por alguna razón, hay otra manera de forzar que el contenedor se estire para contener todo el contenido flotante. Debes poner el elemento con claro: ambos como elementos del último contenedor. Si ignoras IEs antiguas (<8) puedes hacerlo con CSS muy simple (vide https://css-tricks.com/snippets/css/clear-fix/ ):

 .your-container:after { content: ""; display: table; clear: both; } 

height:100% es la altura del contenido que fluye con su contenedor a la mano y no tiene en cuenta su contenido flotante, por eso es que la altura de su contenedor se está agotando. Quítelo y despeje su contenedor correctamente para limpiar sus elementos flotados y funcionará:

 #static-content:before, #static-content:aftr { display:table; content:""; } #static-content:after { clear:both; } #static-content { zoom:1; /*ie fix*/ } 

Tiene un float en static-maincontent , que lo elimina del flujo normal del contenido del documento y, por lo tanto static-content ya no se preocupa por su altura y, por lo tanto, no se expandirá para cubrirlo. Además, quite la height:100% para static-content .

¡LEA PARA RESPONDER! – Está bien, así que tuve el mismo problema, todo lo que se necesitaba era eliminar el estilo de “Posicionamiento”. Debería funcionar perfectamente bien.