Actualizado el 17 de diciembre de 2014 por Parker Bennett.
A medida que aumenta la longitud de la línea del contenido de texto, puede resultar más difícil de leer. Por lo tanto, es una práctica común limitar el ancho del contenido a medida que se amplía la ventana gráfica. A menudo, esto se logra dando al contenido una max-width y centrarlo, ya sea dentro de un elemento de envoltura, o sección por sección.
Pero, ¿qué pasa si queremos que un elemento se extienda visualmente para cubrir todo el ancho de la ventana gráfica, digamos, un color de fondo para un encabezado o encabezados individuales?
Un enfoque es usar un contenedor interno para el contenido que queremos con restricción de ancho, pero dejar el elemento externo al 100% de ancho. Sin embargo, esto agrega un marcado adicional y es (posiblemente, GASP) no semántico!
<header>
<div class="wrap">
<h2>Header</h2>
</div>
</header>
<h3 class="full-width">
<div class="wrap">Heading</div>
</h3>
<div class="wrap">
<p>... text ... </p>
</div>header, .full-width {
width: 100%;
background: #ccc;
}
.wrap {
width: 80%;
max-width: 24em;
margin: 0 auto;
padding: 0.25em 0.625em;
}Sería mejor envolver el contenido semánticamente (por ejemplo, principal o sección) y hacer que los encabezados se dividan visualmente según sea necesario. Aquí hay algunas formas en que podemos:
Usando margen negativo
Un enfoque simple (de Timothy Mackey) utiliza márgenes negativos y relleno para extender el fondo en ambas direcciones. Para evitar activar el desplazamiento horizontal, debemos configurar overflow-x:hidden en los elementos html y body.
html, body {
overflow-x: hidden;
}
.full-width-bar {
margin: 0 -9999rem;
/* add back negative margin value */
padding: 0.25rem 9999rem;
background: rgba(0, 0, 0, 0.5);
}Vea las barras de ancho completo del lápiz con márgenes negativos de Chris Coyier (@chriscoyier) en CodePen.
¿Quiere que la barra de ancho completo tenga un color diferente al del fondo del título? Una forma es utilizar los bordes izquierdo y derecho. Pero resulta que las fronteras súper anchas tienen algunos problemas. Para bordes de más de 960px, debe hacerlos exactamente 9600px o 10240px (o ems equivalentes) para evitar un error en Chrome. Además, debe usar colores sólidos, ya que los valores RGBa muestran un pequeño espacio en Safari. Esto se debe a errores de redondeo cuando el elemento contenedor está centrado.
html, body {
overflow-x: hidden;
}
.full-width-borders {
/* also subtract section padding (1.5rem) */
margin: 0 -601.5rem;
/* add back section padding (1.5rem) */
padding: 0.25rem 1.5rem;
background: red;
/* border has to be solid, not RGBa */
/* 9600px or equiv (600rem = 9600/16) */
border-left: 600rem solid maroon;
border-right: 600rem solid maroon;
}Consulte las barras de ancho completo del lápiz con bordes de Parker Bennett (@parkerbennett) en CodePen.
Dada la complicación de usar bordes, veamos una alternativa:
Usando pseudo elementos
Añadiendo un :before pseudoelemento al encabezado, puede hacer que el fondo detrás de él sea distinto de la barra de ancho completo, utilizando un posicionamiento absoluto y un negativo z-index. Esto también nos permite usar RGBa para la barra de ancho completo.
.full-width-tinted {
position: relative; /* for child pseudo-element */
z-index: 0;
margin: 0 -600rem;
/* add back negative margin value */
padding: 0.25rem 600rem;
background: #666;
background: rgba(0, 0, 0, 0.25);
}
.full-width-tinted:before {
content: "";
position: absolute;
z-index: -1; /* behind parent */
top: 0;
bottom: 0;
/* subtract h2 padding (1.5rem) */
left: 598.5rem;
right: 598.5rem;
background: green;
}Vea las barras de ancho completo del lápiz con márgenes negativos de Chris Coyier (@chriscoyier) en CodePen.
Debes tener un poco de cuidado con los negativos. z-index, ya que tiende a funcionar solo en situaciones bastante simples sin muchos elementos anidados con sus propios antecedentes.
Si desea aún más flexibilidad, puede utilizar dos pseudoelementos, :before y :after, para extender el fondo del encabezado tanto a la izquierda como a la derecha. De esta manera, el fondo podría incluir diferentes colores, anchos o alturas, extenderse en una sola dirección, desvanecerse con un degradado, etc.
.full-width {
position: relative; /* for the child pseudo-elements */
/* negative offset = section padding */
margin: 0 -30px;
/* add back section padding value */
padding: 0.25rem 30px;
background: #333;
}
.full-width:before, .full-width:after {
content: "";
position: absolute;
/* fill vertically */
top: 0;
bottom: 0;
width: 9600px;
right: 100%;
background: green;
}
.full-width:after {
width: 320px;
left: 100%;
/* you're free to do something totally different here */
background: green;
}Vea las barras de ancho completo del lápiz con pseudoelementos de Chris Coyier (@chriscoyier) en CodePen.
Usando box-shadow
Una forma inteligente de no activar el desplazamiento horizontal es usar box-shadow para generar las extensiones de fondo (al menos a la derecha). Andreas creó una demostración de esto:
Vea las barras del navegador de ancho completo con sombra de cuadro de Andreas (@receter) en CodePen.
Desafortunadamente, hay problemas con esto. Charles Stuart señaló un error en Internet Explorer 11 (v11.0.9600.17501) que hace que el uso de box-shadow no sea confiable. Parece que IE está usando suavizado de subpíxeles en el cuadro de sombra incluso cuando el desenfoque está configurado en 0.
Usar unidades de ventana gráfica
Lisa sugirió una forma de no activar el desplazamiento horizontal mediante el uso de una combinación de vw y calc(), que ahora tienen un soporte de navegador bastante sólido. Podría ser útil en las circunstancias adecuadas (pero aún no tiene en cuenta cosas como padding o min-width).
Vea las barras de ancho completo de Pen por Chris Coyier (@chriscoyier) en CodePen.