Estoy en el proceso de volver a trabajar en un sitio web simple para que pueda ejecutarse en una memoria USB, es decir, sin un servidor involucrado.
En una página del original, tenía un control de "selección" que ejecutaba un script que leía un archivo y cargaba imágenes y algo de texto.
Como no puedo cargar archivos desde la computadora del cliente, coloco toda la información en la página, cada entrada en un div separado, cada una con una identificación única, y estoy usando style.visible = "oculto" y "visible" para ocultar las que no quiero ver y mostrar las que quiero.
El problema es que la página permanece del mismo tamaño (longitud) como si cada uno de los divs estuviera visible, y el espacio ocupado por los divs que he ocultado no se libera.
¿Cómo consigo que los divs ocultos renuncien a su espacio?
Aquí está la página original: https://www.vintagebankantiques.net/people.html
Una regla css como
.class-of-divs{ min-width: 100% }o posiblemente
.class-of-divs{ min-width: 100vw }debería ayudar. Sin tener un violín JS o algo así, es difícil decir más.
Lo que hacen estas reglas es decir que esos divs deben tener el 100 % del ancho de la página y no deben cambiar de tamaño en función de la presencia de los otros divs.
Un problema que puede tener es que los divs seguirán cambiando de posición por sus vecinos. Para evitar eso, puede intentar configurar display: none en lugar de visible: hidden . La diferencia clave es que un div con una visibilidad oculta aún afecta el diseño de la página. Un div con una visualización de ninguno no afecta el diseño de la página.