I am struggling to build pages that are 100% height of viewport.
Even when grouping all elements into a Group that is min and max 100% it does not work.
What’s happening is that on my page I have a header that is let’s say 80px of height.
When I add a group for the rest of the page below and I set this page height to be 100%, I always assume that it will occupy 100% of the remaining space but that’s not the case, so the consequence is that my page is now more or less 110% the size of viewport which obliges the users to scroll.
How can I structure my Groups together so they always fit perfectly in height.
Thanks
Is the group in your image nested in another group?
Yes. I tried to nest it in another group with 100% height and also to not nest it in any other group and it always end up the same way meaning pushed down by the header.
Try adding height: 100vh !important; to your element that needs be 100% of viewport height. Use ID or class to target it.
I will usually have similar issues with nested groups when margins are involved. What usually works for me is to use paddings instead of margins in this cases.
Thanks. I am not using margins anywhere though. In the example attached every element (groups) are “raw”.
Where’s the gap between the selected group and the top of the page from?
The gap of the other group size. So if I define the other group (currently a header) of x pixels, the group will be pushed down by the same amount of pixels
So the affected group is nested in a column layout? Sometimes there’s issues with the way Bubble defines heights/widths that results in additional pixels (you can see this in the inspector).
One way is to try to force the parent group to fit using CSS as suggested here:
Another method that I use all the time now is to have my headers float and the containers holding my different “windows” be infinite width/height then adjust for the floating group header using padding instead of margin.