Diferencia entre ancho: 100% y ancho: 100vw?

Tengo que ajustar un iframe en altura de pantalla. Obviamente, quería un 100% de ancho pero, como eso no funciona, utilicé 100vh. Pero vh como vw no es exactamente 100%. En mi computadora portátil a través de Chrome, mientras que el ancho del 100% se adapta perfectamente sin la necesidad de una barra de desplazamiento horizontal, vw tiene aproximadamente un centímetro adicional.

vw y vh representan el ancho de la ventana gráfica y la altura de la ventana gráfica, respectivamente.

La diferencia entre usar width: 100vw vez de width: 100% es que mientras 100% hará que el elemento se ajuste a todo el espacio disponible, el ancho de la vista tiene una medida específica, en este caso el ancho de la pantalla disponible, incluido el margen del documento .

Si establece el body { margin: 0 } del estilo body { margin: 0 } , 100vw debería comportarse igual que el 100%.

La respuesta de Havengard no parece ser estrictamente cierta. Descubrí que vw llena el ancho de la ventana gráfica, pero no da cuenta de las barras de desplazamiento. Por lo tanto, si su contenido es más alto que la ventana gráfica (para que su sitio tenga una barra de desplazamiento vertical), usar vw da como resultado una pequeña barra de desplazamiento horizontal. Tuve que cambiar el width: 100vw por width: 100% para deshacerme de la barra de desplazamiento horizontal.

Use una ID para iframe:

id = “frame” por lo que será: luego debes agregar esto a tu CSS:

 #frame { width: height: {