css - fondo - div width
CSS: alto automático que contiene div, 100% de alto en el fondo div dentro que contiene div (9)
El problema es que tengo un div de contenido que extiende su contenedor en altura (el contenedor y el contenido div tienen altura automática).
Quiero que el contenedor de fondo, que es un div hermano del div de contenido, se estire para llenar el contenedor. El contenedor de fondo contiene divs para dividir el fondo en trozos.
Las divisiones de fondo y contenedor tienen un ancho del 100%, y el contenedor de contenido no.
HTML:
<div id="container">
<div id="content">
Some long content here ..
</div>
<div id="backgroundContainer">
<div id="someDivToShowABackground"/>
<div id="someDivToShowAnotherBackground"/>
</div>
</div>
CSS:
#container {
height:auto;
width:100%;
}
#content {
height: auto;
width:500px;
margin-left:auto;
margin-right:auto;
}
#backgroundContainer {
height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport.
}
En 2018, una gran cantidad de navegadores son compatibles con Flexbox y Grid que son modos de visualización de CSS muy potentes que simplifican métodos clásicos como Faux Columns o Tabular Displays (que se tratan más adelante en esta respuesta).
Para implementar esto con la Grilla, es suficiente especificar mostrar: grilla y grilla-plantilla-columnas en el contenedor. El grid-template-columns depende del número de columnas que tenga, en este ejemplo usaré 3 columnas, por lo tanto, la propiedad se verá: grid-template-columns: auto auto auto , lo que básicamente significa que cada una de las columnas tendrá ancho automático
Ejemplo completo de trabajo con Grid:
html, body {
padding: 0;
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
padding: 20px;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}
<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Grid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="grid-item b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="grid-item c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>
Otra forma sería usar Flexbox especificando la visualización: flex en el contenedor de las columnas y dando a las columnas un ancho relevante. En el ejemplo que voy a usar, que es con 3 columnas, básicamente necesitas dividir el 100% en 3, por lo que es 33.3333% (lo suficientemente cerca, a quién le importa 0.00003333 ... que de todos modos no es visible).
Ejemplo de trabajo completo usando Flexbox:
html, body {
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
width: 100%;
}
.flex-column {
padding: 20px;
width: 33.3333%;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}
<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="flex-column a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="flex-column b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="flex-column c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>
Flexbox y Grid son compatibles con todos los principales navegadores desde 2017/2018, hecho confirmado también por caniuse.com: ¿Puedo usar la red , puedo usar flex ?
También hay una serie de soluciones clásicas, utilizadas antes de la era de Flexbox y Grid, como la Técnica OneTrueLayout , Técnica de Faux Columns , Técnica de visualización tabular CSS y también hay una Técnica de capas .
No recomiendo usar estos métodos porque tienen una naturaleza hackish y no son tan elegantes en mi opinión, pero es bueno conocerlos por razones académicas.
Una solución para columnas con la misma altura es la técnica de visualización en pantalla CSS que significa usar la función de visualización: tabla . Funciona para Firefox 2+ , Safari 3+ , Opera 9+ e IE8 .
El código para la pantalla tabular CSS :
#container {
display: table;
background-color: #CCC;
margin: 0 auto;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
#col1 {
background-color: #0CC;
width: 200px;
}
#col2 {
background-color: #9F9;
width: 300px;
}
#col3 {
background-color: #699;
width: 200px;
}
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
Incluso si hay un problema con la autoexpansión del ancho de la celda de tabla, se puede resolver fácilmente insertando otro divisor dentro de la celda de tabla y dándole un ancho fijo. De todos modos, la sobreexpansión del ancho ocurre en el caso de usar palabras extremadamente largas (que dudo que alguien use, digamos, una palabra de 600px de longitud) o algunas div cuyo ancho es mayor que el ancho de la celda de la tabla.
La técnica de Faux Column es la solución clásica más popular para este problema, pero tiene algunos inconvenientes, como, tiene que cambiar el tamaño de la imagen embaldosada de fondo si desea cambiar el tamaño de las columnas y tampoco es una solución elegante.
La técnica OneTrueLayout consiste en crear un fondo acolchado de una altura extremadamente grande y recortarlo colocando la posición real del borde en la "posición lógica normal" aplicando un margen negativo inferior del mismo valor enorme y ocultando la extensión creada por el relleno con desbordamiento: oculto aplicado al envoltorio de contenido. Un ejemplo simplificado sería:
Ejemplo de trabajo:
.wraper {
overflow: hidden; /* This is important */
}
.floatLeft {
float: left;
}
.block {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30000px; /* This is important */
margin-bottom: -30000px; /* This is important */
width: 33.3333%;
box-sizing: border-box; /* This is so that the padding right and left does not affect the width */
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}
<html>
<head>
<title>OneTrueLayout</title>
</head>
<body>
<div class="wraper">
<div class="block floatLeft a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis.</p>
</div>
<div class="block floatLeft b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit. Praesent sed pellentesque lorem. Nam neque ante, egestas ut felis vel, faucibus tincidunt risus. Maecenas egestas diam massa, id rutrum metus lobortis non. Sed quis tellus sed nulla efficitur pharetra. Fusce semper sapien neque. Donec egestas dolor magna, ut efficitur purus porttitor at. Mauris cursus, leo ac porta consectetur, eros quam aliquet erat, condimentum luctus sapien tellus vel ante. Vivamus vestibulum id lacus vel tristique.</p>
</div>
<div class="block floatLeft c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit.</p>
</div>
</div>
</body>
</html>
La técnica de capas debe ser una solución muy ordenada que implique el posicionamiento absoluto de div''s dentro de un divisor de envoltura con posición relativa principal. Básicamente consiste en una cantidad de divs secundarios y la div principal. El div principal tiene una posición imperativa : relativo a su colección de atributos css. Los hijos de este div están todos en una posición imperativa : absoluta . Los niños deben tener el conjunto superior e inferior en 0 y las dimensiones izquierda-derecha establecidas para acomodar las columnas entre sí. Por ejemplo, si tenemos dos columnas, una de ancho 100px y la otra de 200px , teniendo en cuenta que queremos 100px en el lado izquierdo y 200px en el lado derecho, la columna izquierda debe tener {left: 0; derecha: 200px} y la columna derecha (izquierda: 100px; derecha: 0;}
En mi opinión, la altura no implementada del 100% dentro de un contenedor de altura automatizado es un gran inconveniente y el W3C debería considerar la revisión de este atributo (que desde 2018 se puede resolver con Flexbox y Grid).
En algún lugar tendrá que establecer una altura fija, en lugar de usar el auto en todas partes. Descubrirá que si establece una altura fija en su contenido y / o contenedor, entonces el uso de auto para las cosas dentro de él funcionará.
Además, tus cuadros seguirán ampliándose en altura con más contenido, a pesar de que hayas establecido una altura para él, así que no te preocupes por eso :)
#container {
height:500px;
min-height:500px;
}
Está bien, entonces alguien probablemente me va a dar una bofetada por esta respuesta, pero uso jQuery para resolver todos mis irritantes problemas y resulta que acabo de usar algo hoy para solucionar un problema similar. Suponiendo que usas jquery:
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
esto no se ha probado, pero creo que se puede ver el concepto aquí. Básicamente, una vez cargado, puede obtener la altura (outerHeight incluye relleno + bordes, innerHeight solo para el contenido). Espero que ayude.
Aquí es cómo lo vincula al evento de cambio de tamaño de la ventana:
$(window).resize(function() {
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});
Intente excluir la altura del elemento de estilo.
es decir, ninguno da altura: 100% ni a ningún otro valor.
Make #container para display:inline-block
#container {
height: auto;
width: 100%;
display: inline-block;
}
#content {
height: auto;
width: 500px;
margin-left: auto;
margin-right: auto;
}
#backgroundContainer {
height: 200px; /*200px is example, change to what you want*/
width: 100%;
}
Ver también: W3Schools
No debería tener que establecer la height: 100% en cualquier punto si desea que su contenedor llene la página. Lo más probable es que tu problema esté enraizado en el hecho de que no has eliminado los flotadores en los hijos del contenedor. Hay varias formas de resolver este problema, principalmente agregar overflow: hidden en el contenedor.
#container { overflow: hidden; }
Debería ser suficiente para resolver cualquier problema de altura que tengas.
Solo una nota rápida porque tuve un momento difícil con esto.
Al usar #container {overflow: hidden; } la página que comencé a tener problemas de diseño en Firefox e IE (cuando el zoom entraba y salía, el contenido rebotaba dentro y fuera del div principal).
La solución a este problema es agregar una pantalla: inline-block; al mismo div con desbordamiento: oculto;
Terminé haciendo 2 pantallas: mesa;
#container-tv { /* Tiled background */
display:table;
width:100%;
background-image: url(images/back.jpg);
background-repeat: repeat;
}
#container-body-background { /* center column but not 100% width */
display:table;
margin:0 auto;
background-image:url(images/middle-back.png);
background-repeat: repeat-y;
}
Esto hizo que tuviera una imagen de fondo en mosaico con una imagen de fondo en el medio como una columna. Se extiende al 100% de altura de la página, no solo al 100% del tamaño de la ventana del navegador
{
height:100vh;
width:100vw;
}