Altura div 100% y se expande para adaptarse al contenido

Tengo un elemento div en mi página con su altura establecida al 100%. La altura del cuerpo también se establece en 100%. El div interno tiene un fondo y todo eso y es diferente del fondo del cuerpo. Esto funciona para hacer que la altura del div sea el 100% de la altura de la pantalla del navegador, pero el problema es que tengo contenido dentro de ese div que se extiende verticalmente más allá de la altura de la pantalla del navegador. Cuando me desplazo hacia abajo, el div termina en el punto en el que tenía que comenzar a desplazarse por la página, pero el contenido se desborda más allá de eso. ¿Cómo hago para que el div siempre vaya hasta el fondo para adaptarse al contenido interno?

Aquí hay una simplificación de mi CSS:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Una vez que desplazo la página, la negrura termina y el contenido fluye hacia el fondo rojo. No parece importar si configuro la posición en relativo o absoluto en #some_div, el problema ocurre de cualquier manera. El contenido dentro del #some_div está en su mayoría absolutamente posicionado, y se genera dinámicamente desde una base de datos, por lo que su altura no se puede conocer de antemano.

Editar: Aquí hay una captura de pantalla del problema:

Esto es lo que debe hacer en el estilo CSS, en general div

display: block;
overflow: auto;

Y no tocar height

Establezca el heightto autoy min-heightto 100%. Esto debería resolverlo para la mayoría de los navegadores.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

Por lo general, 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

Si solo deja el height: 100%y usa display:block;el div, ocupará tanto espacio como el contenido dentro del div. De esta manera, todo el texto permanecerá en el fondo negro.

Esta pregunta puede ser antigua, pero merece una actualización. Aquí hay otra forma de hacer eso:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

Prueba esto:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

IE6 y versiones anteriores no admiten la propiedad min-height.

Creo que el problema es que cuando le dices al cuerpo que tenga una altura del 100%, su fondo solo puede ser tan alto como el alto de la "vista" de un navegador (el área de visualización que excluye las barras de herramientas de los navegadores y las barras de estado y barras de menús y el bordes de la ventana). Si el contenido es más alto que una ventana gráfica, desbordará la altura dedicada al fondo.

Esta propiedad de altura mínima en el cuerpo debe FORZAR que el fondo sea al menos tan alto como una ventana gráfica si su contenido no llena una página entera hasta el final, pero también debe permitir que crezca hacia abajo para abarcar más contenido interior.

Antigua pregunta, pero en mi caso encontré el uso position:fixedresuelto para mí. Sin embargo, mi situación podría haber sido un poco diferente. Tenía un semitransparente superpuesto divcon una animación de carga que necesitaba mostrar mientras se cargaba la página. Entonces, usar height:auto / 100%o min-height: 100%ambos llenó la ventana pero no el área fuera de la pantalla. Utilizando position:fixedeste desplazamiento superpuesto con el usuario, siempre cubría el área visible y mantenía mi animación de precarga centrada en la pantalla.

Simplemente agregue estas dos líneas en su ID de CSS #some_div

display: block;
overflow: auto;

¡Después de eso obtendrás lo que estás buscando!

No estoy completamente seguro de haber entendido la pregunta porque esta es una respuesta bastante sencilla, pero aquí va ... :)

¿Has intentado configurar la propiedad de desbordamiento del contenedor en visible o automático?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

Agregar eso debería empujar el contenedor negro al tamaño que requiera su contenedor dinámico. Prefiero visible a automático porque parece que viene con barras de desplazamiento ...

Los navegadores modernos admiten la unidad de "altura de ventana gráfica". Esto expandirá el div a la altura de vista disponible. Lo encuentro más confiable que cualquier otro enfoque.

#some_div {
    height: 100vh;
    background: black;
}

Incluso tú puedes hacer así

display:block;
overflow:auto;
height: 100%;

Esto incluirá cada div dinámico según el contenido. Suponga que si tiene un div común con clase, aumentará la altura de cada div dinámico según el contenido

También puedes usar

 display: inline-block;

el mío trabajó con esto

REVESTIMIENTO SIN POSICIÓN: FIJO

Una forma realmente genial de resolver esto para un menú reciente fue configurar el cuerpo para:

position: relative

y configura tu clase de envoltura así:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

Esto significa que no tiene que establecer la posición fija y aún puede permitir el desplazamiento. Lo he usado para superponer menús que son REALMENTE grandes.

usar flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Ok, intenté algo como esto:

cuerpo (normal)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

No es la forma exacta de escribirlo, pero si haces que la pantalla div principal se muestre como una tabla, se expande y luego implemento barras de desplazamiento.