Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

259
Visualizações
¿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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda