Meaning of 100% in the Height setting?

Hello everyone!

When I drag-and-dropped a container on the component canvas and set its height to 100%, I was expecting that the container would be stretched to the entire, vertical screen, but it didn’t.

When I did the same to the width, the container expanded and took the whole width of the screen though.

Why I can’t set the height to take the full-screen?

  1. Off the top of my head, it’s possible you may have an invisible container or component that you’ve forgotten about above the container you’re trying to stretch to 100% height. As components and the like are stacked in a relative manner by default, meaning usually one on top of the other, that may be the case.

  2. Second, you may want to check your container’s margins in the Style tab. You may have previously set a margin which would shift the container in question down however many pixels set. Set it to ‘0’ if this is the case.

  3. Third, check your Page Layout’s padding. You may have previously set the top (or bottom, depending on your case) padding higher than ‘0’. Again, this will shift any components in whichever direction padding was applied, including creating a gap that could prevent your container from stretching across the entire page.

  4. Fourth, check that you haven’t made a mistake I’ve been guilty of myself where you’ve applied a
    max-height to your container, but then also set a general height of 100%. It’s actually possible to do that despite the parameters conflicting with one another – again, guilty of it!

If you haven’t already, try investigating the above points. I’m thinking #3 might be what you’re looking for. If not, let us know and we can brainstorm some more. Also, if you’re open to it, you can include your App ID number so others can take a look at what the problem might be. :slight_smile:

Make sure you set Stretch To Viewport Height on your Page Layout Style advanced settings

3 Likes