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
6 Likes
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?
@SoyPardal
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 
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?
Hello @stuart4 , thanks for such wonderful and well-explained example. Iâm replicating your example with a couple for inside groups, but I am struggling with my final container which only shows a quarter of its size.
I have the following structure:
As you can see, my parent group is a Column Group with âFit height to contentâ uncheck and âAllow vertical scrolling when content overflowsâ checked. Each Group inside my parent group has a fixed height of 180 px.
Did I miss something from your example? I want to replicate that behavior you explained in an app Iâm currently developing but still no luck with that.
Thanks in advance,
youll have to apply some bottom margin to the âMainâ container that is the same size as the footer floating group.
Because when using this method you are using a floating group with is going to âfloatâ relative to the bottom of the page, and over whatever is underneath it.
hope that helps.
1 Like
