Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

253
Views
¿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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!