que - title css

Altura de división del 100% y se expande para adaptarse al contenido

Question

Tengo un elemento div en mi página con su altura establecida en 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 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 tuvo que comenzar a desplazarse por la página, pero el contenido se desborda más allá de eso. ¿Cómo hago que el div siempre llegue hasta el fondo para que se ajuste 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 recorro la página, la oscuridad termina y el contenido fluye sobre el fondo rojo. No parece importar si establezco la posición relativa o absoluta en el #some_div, el problema ocurre de cualquier manera. El contenido dentro de #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:

Answer 1

Esta pregunta puede ser antigua, pero merece una actualización. Aquí hay otra manera de hacerlo:

#yourdiv {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width:100%;
height:100%;
}

Answer 2

Establezca la height en auto y min-height en 100% . Esto debería solucionarlo para la mayoría de los navegadores.

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

Answer 3

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

display: block;
overflow: auto;

Y no toques la height

Answer 4

Incluso tú puedes hacer esto

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

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

Answer 5

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

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

Answer 6

Miré algunas respuestas y las combiné. Aquí está:

#some-div {
overflow:scroll;
display:block;
min-height:100%;
}

Esta respuesta funciona mejor, ya que la respuesta admitida actualmente activa la opción automática de desbordamiento (que es diferente al desplazamiento en algunos navegadores). Esto también le permite establecer una altura mínima a diferencia de la respuesta aceptada donde no puede tocar la altura.

Answer 7

No estoy del todo 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 como visible o automática?

#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 que sea visible a automático porque el auto parece venir con barras de desplazamiento ...

Answer 8

Por lo general, este problema surge cuando los elementos secundarios de una Div matriz están flotando. 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 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

Answer 9

Prueba esto:

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

IE6 y versiones anteriores no son compatibles con 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 la altura de un navegador "viewport" (el área de visualización que excluye las barras de herramientas y las barras de estado y las barras de menú de los navegadores). bordes de la ventana). Si el contenido es más alto que una ventana gráfica, se 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 el contenido no ocupa toda la página hasta el fondo, pero también debería permitir que crezca hacia abajo para abarcar más contenido interior.

Answer 10

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

Answer 11

Una vieja pregunta, pero en mi caso encontré usar la position:fixed solucioné para mí. Mi situación podría haber sido un poco diferente sin embargo. Tenía una div semitransparente div con una animación de carga que necesitaba que se mostrara mientras se cargaba la página. Entonces, al usar la height:auto / 100% o min-height: 100% llenaron la ventana pero no el área fuera de la pantalla. Usando la position:fixed hizo este desplazamiento de superposición con el usuario, por lo que siempre cubría el área visible y mantenía mi animación de precarga centrada en la pantalla.

Answer 12

ok intenté algo como esto

cuerpo (normal)

MainDiv (donde va todo el contenido): Pantalla: tabla; overflow-y: auto

no es la forma exacta de escribirlo, pero si haces que la pantalla div principal se convierta en una tabla, se expandió y luego obtuve barras de desplazamiento.