Container or section with fixed height

Foundry
1

Is there a container or section to set fixed height, e.g. equal screen height? I do not want to use Section Stack, but something similar with greater flexibility.

2

Depending on what you want to display, you may consider the Banner Stack. You can set Banner Height for desktop, tablet and mobile. You can give the banner a neutral background color and add multiple stacks (headers paragraph, images,…) in a banner.

3

Or you can just apply a class to the Container stack, then use some css like this…

.setHeight {
	height: 100vh;
}

To add…

If you want to add content to a specific place in the full height container you can also use the Position stack.

3 Likes
4

Good suggestions here.

Additionally, I had an idea for a stack in a future version of Foundry that would allow you to do some cool things like this. The functionality could likely be integrated into Backdrop, adding some functionality to the stack. That’s for down the road though unfortunately.

5 Likes
5

Did not work for me.

6

Ok. It does work, but maybe it’s not doing what you want. Explain what you want to do and we can offer more suggestions.

8

Typing in your .setHeight code, does the code go in the CSS tab, and then the setHeight go into the CSS box in the actual stack? I am trying to figure out how this works.

Okay. Tried your suggestion. It WORKS! Thanks. I have always wondered about how those little CSS Classes boxes work!

9

Correct. CSS provided should be placed in the ‘CSS’ area in the ‘HTML Code’ pane of the inspector and setHeight in the ‘CSS Classes’ field in the stack settings. Note: no leading ..

3 Likes
10

Yes, apologies, I could have been clearer with that post! DLH has you covered.

What I will say though is this approach will in most cases that I can think of not resulting what is wanted.

All it will od is make the container the css is applied to span the same height as the browser window, but any content added will be right at the top. IME when someone wants something to span the full height of the browser window they also want the content added to me in the vertical middle. The CSS I supplied won’t do that. If that is what you want to achieve, the Position stack is the tool I’d use.

I’m a big fan of the Position stack, which enables you to precisely position any content within/ontop/in-relation to other content.

2 Likes