Shrink web page to fit content

Question

I am in the process of reworking a simple web site so that it can run on a thumb drive, aka with no server involved.

On a page on the original I had a "select" control that would execute a script that read a file and loaded images and some text.

Since I can't load files from the client's computer, I put all the information on the page, each entry in a separate div, each with a unique id, and am using style.visible = "hidden" and "visible" to hide the ones I don't want to see and show the ones I do.

Problem is, the page stays the same size (length) as if each of the divs was visible, and the space occupied by the divs I have hidden is not released.

How do I get the hidden divs to give up their space?

Here's the original page: https://www.vintagebankantiques.net/people.html

Answer 1

A css rule like

.class-of-divs{
    min-width: 100%
}

or possibly

.class-of-divs{
    min-width: 100vw
}

should help. Without having a JS fiddle or something it's hard to say more.

What these rules do is say that those divs must all be 100% of the width of the page, and shouldn't change size based on the presence of the other divs.

A problem you might get is that the divs will still get shifted in position by their neighbours. To prevent that, you could try setting display: none instead of visible: hidden . The key difference is that a div with a visibility of hidden still affects page layout. A div with a display of none does not affect page layout.