css - vmin - viewport height

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

Question

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

Answer 1

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

Answer 2

Use una identificación para iframe:

id = "marco", por lo que será: <iframe id="frame"> entonces debes agregar esto a tu CSS:

#frame {
width:
height:
{

Answer 3

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

La diferencia entre usar width: 100vw lugar de width: 100% es que si bien el 100% ajustará todo el espacio disponible, el ancho de la ventana gráfica tiene una medida específica, en este caso el ancho de la pantalla disponible, incluido el margen del documento. .

Si configura el body { margin: 0 } del estilo body { margin: 0 } , 100vw debe comportarse igual que el 100%.