Having a header causes max height to be bigger than screen

Hi there,

I’m having some issues with the New Responsive Engine and using max height 100%. My current page setup is as follows:

Page: column group
– Header: reusable element, fit height to content
–Content: row group, max height 100%

I have the max height of the Content group set to 100%, however this fills to 100% of screen height and not the part of the screen without the header. So the content group exceeds the bottom of the screen by the header size, this way I always have a scrollbar.

Am I doing something wrong? Any help would be greatly appreciated.

  • Axel Bremer

In the responsive engine instead of using 100% use the vertical stretch which is under the vertical alignment, see image below. The only time I use 100% now in the responsive engine is for the width when I’m using a row container layout and want to force the group to wrap below. Even this has the same problem you’ve explained here of overlapping, which I think is an unintended bug, so you need to be careful and tricky on how to use it like making sure you do not use margins or padding in that containing group.

1 Like

Thanks so much! So for this I’d need to wrap the column page in a Row group to do this right?

I don’t know exactly what you’re working with, but I have had to put groups in other group so that they lineup with other attributes. Test and see for yourself is the best way to learn in my opinion.

Thanks Chris, I tried it and it worked!