Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

260
Vistas
¿Cómo combinar el cambio de tamaño dinámico de altura div de Javascript con hipervínculos de anclaje en la página?

Ok, esta es una pregunta inusual, pero he estado jugando con ella durante horas y no he tenido ningún progreso. ¡Espero que la comunidad SO pueda ayudar! 🤓

Aquí está la página web en cuestión: https://pifornerds.io/

Estamos usando este código para establecer dinámicamente la altura del fondo (los dígitos de pi que ves en gris) en función de la longitud del contenido de primer plano:

 <script> // Dynamically set base height based on container contents var containerHeight = document.getElementById("container").offsetHeight; var baseHeight = document.getElementById("base").offsetHeight; if (baseHeight > containerHeight) { document.getElementById("base").style.height = containerHeight + "px"; } </script>

Fragmento de CSS:

 .layered { display: grid; justify-items: left; background-color: #222222; max-width: 1000px; margin: auto; height: auto; min-height: 100px; overflow: hidden; } .layered > * { grid-column-start: 1; grid-row-start: 1; } .base { font-family: "DejaVuSansMonoBold", courier; color: white; opacity: 0.1; max-width: 100%; height: 100%; word-break: break-all; margin-top: -3px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; position: static; z-index: 1; overflow: hidden; } .container { display: block; height: max-content; overflow: hidden; }

Queríamos hacer esto para que no hubiera un montón de dígitos pi en el área del pie de página. Creemos que se ve "más limpio" de esta manera.

Sin embargo, el menú en la parte superior usa enlaces ancla para saltar al contenido que se encuentra más abajo en la página, por ejemplo:

<a href="#roadmap">Roadmap</a>

salta a:

<a id="roadmap"></a>

Ahora aquí está el problema...

Después de hacer clic en un enlace de anclaje del menú y luego intentar desplazarse hacia arriba en la página hasta la parte superior, no puede 🧐 ... porque de alguna manera la actualización de altura de Javascript anterior no lo permite.

Esto es lo más lejos que puedo desplazarme ahora, después de hacer clic en "Hoja de ruta":

ingrese la descripción de la imagen aquí

¿Algunas ideas? ¡Gracias por adelantado! 😀

EDITAR: Aquí hay un violín: https://jsfiddle.net/imkane/kof83msy/4/ Por supuesto que funciona correctamente allí 😖

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Debe eliminar el overflow: hidden; de .layered div. Probablemente sea mejor agregar overflow: hidden; a .base div, que es en el que establece la altura.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda