css - pantalla - hacer que un div ocupe todo el alto
hacer que la altura de div se expanda con su contenido (23)
Forma muy sencilla
En padre DIV:
height: 100%;
Este trabajo para mi siempre
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 accomodate 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_content no se extiende para acomodar a todos los divs internos, con el resultado de que continúan contra el fondo.
¿Como puedo resolver esto?
¿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.
Agregué Bootstrap a un proyecto con etiquetas de section que había establecido al 100% de la altura de la pantalla. Funcionó bien hasta que hice que el proyecto respondiera, en ese momento tomé prestada parte de la respuesta de jennyfofenny , de modo que el fondo de la sección coincidía 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 que es un 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 expandirá, el contenido permanecerá dentro de la sección y su fondo mantendrá el color deseado.
Antes de hacer nada revisa las reglas de css con:
{ position:absolute }
Eliminar si existen y no los necesita.
En CSS: #clear_div{clear:both;}
Después de la etiqueta div del div interno agregue este nuevo div siguiente
<div id="clear_div"></div>
Here : para obtener más información
Este problema surge cuando se flotan los elementos secundarios de una división padre. 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 división 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 cita doble "". Además, desbordamiento: auto; podría 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.
Intenta esto: overflow: auto;
Funcionó para mi problema ..
Lo siguiente debería funcionar:
.main #main_content {
padding: 5px;
margin: 0px;
overflow: auto;
width: 100%; //for some explorer browsers to trigger hasLayout
}
Los elementos flotantes no ocupan el espacio dentro del elemento principal, ¡como su nombre sugiere, flotan! Por lo tanto, si no se proporciona explícitamente una altura a un elemento que tiene sus elementos secundarios flotando, entonces el elemento principal parecerá que se contrae y parece no aceptar las dimensiones del elemento secundario, también si su overflow:hidden; dado overflow:hidden; Es posible que sus hijos no aparezcan en pantalla. Hay múltiples formas de lidiar con este problema:
Inserte otro elemento debajo del elemento flotado con
clear:both;Propiedad, o usoclear:both;encendido:afterdel elemento flotado.display:inline-block;usodisplay:inline-block;oflex-boxlugar defloat.
Me estoy topando con esto en un proyecto: tenía una mesa dentro de un div que estaba saliendo del fondo del div. Ninguno de los arreglos de altura que probé funcionó, pero encontré un arreglo extraño para eso, y es poner un párrafo en la parte inferior de la división con solo un punto. Luego aplique el estilo del "color" del texto para que sea el mismo que el fondo del contenedor. Funcionó limpio como a usted le plazca y no requiere javascript. Un espacio que no se rompa no funcionará, ni tampoco una imagen transparente.
Aparentemente solo necesitaba ver que hay algo de contenido debajo de la tabla para poder estirarlo y contenerlo. Me pregunto si esto funcionará para alguien más.
Este es el tipo de cosa que hace que los diseñadores recurran a los diseños basados en tablas: la cantidad de tiempo que he pasado resolviendo esto y haciéndolo compatible con todos los navegadores me está volviendo loco.
Necesitas forzar un clear:both antes de que se #main_content div #main_content . Probablemente movería el <br class="clear" />; en el #main_content div y establece el CSS para ser:
.clear { clear: both; }
Actualización: esta pregunta todavía recibe una buena cantidad de tráfico, así que quería actualizar la respuesta con una alternativa moderna usando 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>
La mayoría de los navegadores modernos admiten actualmente Flexbox y las unidades de puerto de vista , 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.
No es necesario usar mucho CSS, solo use bootstrap, luego use:
class="container"
para el div que necesita ser llenado.
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 el div establecido de 200px
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.
Por lo general, creo que esto se puede resolver forzando una clear:both reglas sobre el último elemento secundario de la lista #items_list .
Usted puede utilizar:
#items_list:last-child {clear: both;}
O, si está usando un lenguaje dinámico, agregue una clase adicional al último elemento generado en cualquier bucle que cree la lista, de modo que termine con algo en su html como:
<div id="list_item_20" class="last_list_item">
y css
.last_list_item {clear: both; }
Probé esto y funcionó
<div style=" position: absolute; direction: ltr;height:auto; min-height:100%"> </div>
Sé que este es un tipo de hilo antiguo, sin embargo, esto se puede lograr con la propiedad CSS de min-height una manera limpia, así que lo dejo aquí para futuras referencias:
Hice un violín basado en el código publicado de OP aquí: http://jsfiddle.net/U5x4T/1/ , a medida que elimina y agrega divs adentro, notará cómo se expande o reduce el tamaño del contenedor.
Las únicas 2 cosas que necesita para lograr esto, adicionales al código OP son:
* Desbordamiento en el contenedor principal (requerido para los divs flotantes)
* propiedad de css de altura mínima, más información disponible aquí: http://www.w3schools.com/cssref/pr_dim_min-height.asp
Si está utilizando la interfaz de usuario de jQuery, ya tienen una clase que funciona solo un hechizo agrega un <div> en la parte inferior dentro del div que desea expandir con height:auto; luego agregue un nombre de clase ui-helper-clearfix o use este atributo de estilo y agregue como se muestra a continuación:
<div style=" clear:both; overflow:hidden; height:1%; "></div>
agregue la clase jQuery UI a la división clara, no a la división que desea expandir.
Use la etiqueta span con display:inline-block css adjunta a ella. Luego puede usar CSS y manipularlo como un div en muchas formas, pero si no incluye un width o height se expande y retrae en función de su contenido.
Espero que ayude.
Yo solo usaría
height: auto;
en tu div. Sí, ya sé que llego un poco tarde, pero pensé que esto podría ayudar a alguien así me habría ayudado si estuviera aquí.
agregue lo siguiente:
overflow:hidden;
height:1%;
a tu div div. Elimina la necesidad de extra <br /> para el claro.
agregue una propiedad flotante a la #main_content - luego se expandirá para contener sus contenidos flotantes
como una forma alternativa también puede probar esto que puede ser útil en algunas situaciones
display:table;