Floating Group with header and footer

This is a pretty simple thing to do but may be confusing if you think you need nested floating groups for this kind of effect (which i did for a minute).

To do this, create a floating group with a column layout


create 3 groups - one for the header, one for the middle and one for the footer.

Make the Group Tabs, and Group Footer the desired height.

The Group Content is where the magic happens - set this to container layout of column, this is where you will put your other groups.

Make sure you un-ckeck fit height to content and tick allow vertical scrolling.

All done, one thing you will find is its hard to work with the group when you are building,when the 'fit height to content isn’t ticked"

  • mainly for my future reference :slight_smile:

I’m trying to build something very similar, but having difficulty getting it to function properly.

  • Are you using one master floating group with 3 non-floating groups inside of it; or are they 3 separate floating groups?

  • I can accomplish something similar with 3 floating groups, with the header and footer set to the same height %, but when I want the footer to have a larger height than the header, the middle content floating group no longer meets up to the bottom of the header or to the top of the footer.

Could you give an example?

I want the header to be 7% and the footer to be 10%, but if I set the content floating group to Both, it won’t hug the header and footer. It’s obviously even between the very top and bottom of the page, but want a scrollable section between the floating group Header and Footer.

I assume you are trying to do something

like this? {sorry for the colours)

Page set to Column

Insert a floating group set to relative to top
Insert a floating group set to relative bottom
Insert a parent standard group set to column, with a margin of whatever you set the top floating group to be in height (if you want). and set the height of the group to be 100%

Within in this standard parent group add in you other groups that have your content.

Ill assume that’s what you need.?

Oh and you may need to right click bottom floating group and ‘bring to front’

1 Like

What i was trying to achieve in my original post was to have a sidebar open on a page and have a static header and footer within the side bar with scrolling inner contents.

What Ive shown you in my last post is how to do that on the page itself, for clarification in case you need to understand the difference :grinning:

Are your top and bottom floating groups different heights? I’m looking for the footer to be slightly taller than the header, but when I do this, the Content middle group doesn’t meet exactly to the bottom of the Header or the top of the Footer.

They can be different yes, I’d suggest depending on how you are doing it play with the margins of the middle group.

I’m using % instead of px to set the heights. That means I can’t use margins push my content group below my header floating group, right?