Solución:
Básicamente, la respuesta es no, si tiene una barra de desplazamiento vertical, no hay forma de hacer que 100vw sea igual al ancho de la ventana gráfica visible. Aquí están las soluciones que he encontrado para este problema.
advertencia: No he probado estas soluciones para compatibilidad con navegadores.
tl; dr
Si necesita que un elemento tenga el 100% del ancho de la ventana gráfica visible (ventana gráfica menos la barra de desplazamiento), deberá establecerlo en el 100% del cuerpo. No puede hacerlo con unidades vw si hay una barra de desplazamiento vertical.
1. Configure todos los elementos del ancestro en posición estática.
Si se asegura de que todos .boxLos antepasados están configurados para position: static; luego establece .box para width: 100%; por lo que será el 100% del ancho del cuerpo. Sin embargo, esto no siempre es posible. A veces necesitas que uno de los antepasados sea position: absolute; o position: relative;.
Ejemplo
2. Mueva el elemento fuera de los antepasados no estáticos
Si no puede configurar los elementos del ancestro en position: static; tendrás que moverte .box fuera de ellos. Esto le permitirá establecer el elemento al 100% del ancho del cuerpo.
Ejemplo
3. Quitar la barra de desplazamiento vertical
Si no necesita el desplazamiento vertical, simplemente puede eliminar la barra de desplazamiento vertical configurando el <html> elemento a overflow-y: hidden;.
Ejemplo
4. Quitar la barra de desplazamiento horizontal
Esto no soluciona el problema, pero puede ser adecuado para algunas situaciones.
Establecer el <html> elemento a overflow-y: scroll; overflow-x: hidden; evitará que aparezca la barra de desplazamiento horizontal, pero el elemento 100vw aún se desbordará.
Ejemplo
Especificación de longitudes de porcentaje de ventana gráfica
Las longitudes del porcentaje de la ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia. Sin embargo, cuando el valor de desbordamiento en el elemento raíz es automático, se supone que las barras de desplazamiento no existen. Tenga en cuenta que el tamaño del bloque contenedor inicial se ve afectado por la presencia de barras de desplazamiento en la ventana gráfica.
Parece que hay un error porque las unidades vw solo deben incluir el ancho de la barra de desplazamiento cuando el desbordamiento está configurado en automático en el elemento raíz. Pero he intentado configurar el elemento raíz en overflow: scroll; y no cambió.
Ejemplo
Este es un enfoque más completo del error, ya que todavía existe en los navegadores modernos. Configuración overflow-x: hidden puede causar problemas o ser indeseable en muchas situaciones.
Un ejemplo completo está disponible aquí: http://codepen.io/bassplayer7/pen/egZKpm
Mi enfoque fue determinar el ancho de la barra de desplazamiento y usar calc() para reducir el 100vw por la cantidad de la barra de desplazamiento. Esto es un poco más complicado porque en mi caso, estaba sacando el ancho del contenido de un cuadro que tenía un definido con, por lo que también necesitaba declarar el margen.
Algunas notas con respecto al código a continuación: primero, noté que 20px parece ser un número mágico bastante amplio para las barras de desplazamiento. Utilizo una variable SCSS (no tiene que ser SCSS) y código fuera de @supports como alternativa.
Además, esto no garantía que nunca habrá barras de desplazamiento. Dado que requiere Javascript, los usuarios que no lo tengan habilitado verán barras de desplazamiento horizontales. Podrías solucionarlo estableciendo overflow-x: hidden y luego agregar una clase para anularla cuando se ejecuta Javascript.
Código SCSS completo:
$scroll-bar: 20px;
:root {
--scroll-bar: 8px;
}
.screen-width {
width: 100vw;
margin: 0 calc(-50vw + 50%);
.has-scrollbar & {
width: calc(100vw - #{$scroll-bar});
margin: 0 calc(-50vw + 50% + #{$scroll-bar / 2});
}
@supports (color: var(--scroll-bar)) {
.has-scrollbar & {
width: calc(100vw - var(--scroll-bar));
margin: 0 calc(-50vw + 50% + (var(--scroll-bar) / 2));
}
}
}
Convierta lo anterior a CSS simple simplemente eliminando #{$scroll-bar} referencias y reemplazando con el valor px
Entonces este Javascript establecerá la propiedad personalizada de CSS:
function handleWindow() {
var body = document.querySelector('body');
if (window.innerWidth > body.clientWidth + 5) {
body.classList.add('has-scrollbar');
body.setAttribute('style', '--scroll-bar: ' + (window.innerWidth - body.clientWidth) + 'px');
} else {
body.classList.remove('has-scrollbar');
}
}
handleWindow();
Como nota al margen, los usuarios de Mac pueden probar esto yendo a Preferencias del sistema -> General -> Mostrar barras de desplazamiento = Siempre
Los acolchados y los bordes pueden interferir. También puede el margen. Utilice el tamaño de la caja para calcular el ancho, incluidos estos atributos. Y tal vez elimine el margen (si lo hay) del ancho.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0; /* interferes with 100vw */
}
.parent {
width: 100vw;
max-width: 100%; /* see below */
}
.box {
width: 100%; /* For those good old-fashioned browsers with no vw or calc() support */
width: -webkit-calc(100vw - [your horizontal margin, if any]);
width: -moz-calc(100vw - [your horizontal margin, if any]);
width: calc(100vw - [your horizontal margin, if any]);
max-width: 100%
}
Parece que tienes que agregar max-width: 100%; si hay un reflujo que hace que aparezca la barra de desplazamiento después el cálculo inicial del ancho de la ventana gráfica. Esto no parece suceder en los navegadores sin una barra de desplazamiento que interfiera (iOS, OS X, IE 11 Metro), pero puede afectar a todos los demás navegadores.