What is an actual working method to get page height to dynamically match visible content?

@louisadekoya, I was testing around a few other methods today and I think I’ve found one that is consistent that allows you to overlap floating groups (set to float: nothing, so they behave similarly to regular groups!)

Preview:

Editor: (*The forum is adding *amp but the page is called “collapsing-groups”)

In this example, there are three floating groups (blue, green, orange). They all are not visible on page load and overlap beneath the buttons (the buttons toggle each fg):

Then there is a single collapsable group beneath the floating groups which stretches the length of the page, (not visible on page load), that collapses in height. This way, the collapse occurs once the page is loaded, but when the longer floating groups become visible, the page adjusts dynamically.

I’m almost sure this will work for everything as long as each group in the mobile app is converted to a floating group (float: nothing), none are nested, and the collapsible group stretches the length of the page. Let me know if this works for you too! :slight_smile:

2 Likes