0
154
ViewsEl atributo de ancho no actúa correctamente en mi página web
Soy nuevo en el desarrollo web y tengo problemas para crear una página web. En realidad, estaba creando una animación de barra de carga en la parte superior de la ventana y establecí su ancho en 100vw , pero ocupa más espacio del que debería. Aquí hay una imagen para demostrar: 
Como puede ver en la esquina superior derecha, está desbordando la ventana. ¿Por qué es así?
Aquí está mi código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loading Bar</title> <style> #progress{ background-color: red; height: 3px; width: 0vw; transition: width 3s ease-in-out; } *{ margin: 0; padding: 0; } header { height: 122px; background-color: black; } main { height: 899px; background-color: blue; } </style> </head> <body> <div id="progress"></div> <header></header> <main> <button id="btn">Reload</button> </main> </body> <script> btn.addEventListener("click", ()=>{ progress.style.width = "100vw" }) </script> </html>¡¡Gracias por adelantado!!
2 answers
Answer question0
Intente agregar max-width: 100% a su barra de progreso css, de acuerdo con https://caniuse.com/viewport-units , hay un problema conocido en Firefox en el que 100vw considera la longitud total de la página, incluida la barra de desplazamiento vertical como su ancho Este desplazamiento vertical es lo que hace que su página web tenga un desbordamiento horizontal.
0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loading Bar</title> <style> body{ overflow-x: hidden; } #progress{ background-color: red; height: 3px; width: 0vw; transition: width 3s ease-in-out; } *{ margin: 0; padding: 0; } header { height: 122px; background-color: black; } main { height: 899px; background-color: blue; } </style> </head> <body> <div id="progress"></div> <header></header> <main> <button id="btn">Reload</button> </main> </body> <script> btn.addEventListener("click", ()=>{ progress.style.width = "100vw" }) </script> </html>