Aquí hay un video del problema. Y no estoy seguro de por qué ocurre este problema cuando disminuyo la altura en el modo de diseño receptivo. Desarrollador web principiante, se agradece cualquier ayuda.
.main-navigation { position: absolute; height: 100%; top: -100%; bottom: 0; left: 0; right: 0; background-color: #fffefc; transform: translateY(0); transition: all 500ms; } /* modifier class*/ .navigation-open { transform: translateY(100%); } const closeButton = document.querySelector(".close-nav-btn"); const openButton = document.querySelector(".open-nav-btn"); const nav = document.querySelector(".main-navigation"); closeButton.addEventListener("click", () => { nav.classList.remove("navigation-open"); }); openButton.addEventListener("click", () => { nav.classList.add("navigation-open"); });Avíseme si se requiere más información para ayudar. (:
Esta top: -100% que tiene significa "mover la navegación a la parte superior de la altura del bloque contenedor". Cuando cambia el tamaño, la altura del bloque contenedor se vuelve más pequeña que la altura de su navegación, lo que está causando este desbordamiento que ve. Una solución podría estar haciendo lo siguiente.
Observe que estoy animando la
heightde la navegación, en lugar de su propiedadtop.
.main-navigation { position: fixed; top: 0; left: 0; width:100%; height:0; overflow:hidden; background-color: #fffefc; transition: all 500ms; } .navigation-open { overflow:auto; height: 100vh; }