[Support request] keeping pages the same height

[Robin]

hello again

I would like to keep the height of all the web-site pages the same, possibly also keeping an image at the bottom of the page. If you visit the link below you will see what I mean.

There will be text in place of the spacers and title-image shown on each page. Not a lot of text, so I think that same page height will work (and if not, overflow auto can step in.

What I want to know is how to make an area of text (paragraphs and a small header) exactly the same height as the content above the bottom image of the peaks.

And would it be a good idea for me to use a hook for that bottom image?

[David]

Hi there,

put it down to lack if coffee – but i am not clear on what you require.
Any possibility of a mockup screenshot ?

[Robin]

I want the website to function basically like a deck of flashcards, always the same height. Not sure if I will keep that bottom image, but I’m thinking of keeping it as low opacity– but that would require layers, and I don’t know how to do that without that peaks image being the background image– which brings up the image-going-underneath-the-menu problem we’ve talked about before (that I tried and failed to solve with a header-element.

[Robin]

I will look at the header element docs again and see if I can figure that out. the same thing would pertain: I want to see the pages all at the same fixed height.

[Tom]

Hi there,

So you want the page to be 100% height and no taller? Or do you want it to be at least 100% in height with the ability to scroll down?

[Robin]

100% of the browser height and no taller. I can use overflow css for text areas.

[David]

Tricky to do.
You would need to add a Container Block and set is Spacing > Min Height to 100vh.
Then give it an Advanced > Additional CSS class of max-viewport

Then add this CSS:

.max-viewport {
    max-height: 100vh;
    overflow-y: scroll;
}

Thats the first step in ensuring your parent container block is always filling the screen.
With the Merged header enabled, this Conatiner Block will need enough Top Padding so it does not fall behind the Header.

Thats the logic of it – will no doubt need some tweaking and similar treatment of for overflow scroll will have to be applied to any nested containers or grid columns.

[Robin]

I will try that. There is no merged header, as I haven’t yet solved that– couldn’t make the Header element work even though I followed your instructions, so there is no Header Element active.

Thank you.

[David]

Let us know how you get on.

[Author]

Posts