Auto Height of Section is not correct

Hey People!

I have quite a bit of trouble with the Section height.

When I set my section height to auto with boxes inside which are set on fluid, the section doesn’t recognize the Boxes and gets way too small.

My Hero on the following page is 70vh long and I want my Section to adjust to these 70vh by setting it on auto height.
However whenever I do the section seems to “overlook” the hero with 70vh and gets way smalller.


I am not really sure what I am doing wrong right now.
Can you help me?

Thanks in advance and all the best!

When using vh I always watch to make sure I am filling that portion of the screen. Problems, like what you are experiencing occur when your heights don’t match the parent grid/container. In the editor you will notice the page height jumping, collapsing of expanding by itself. IF this is occurring with you, then make sure that portion of the page has either a min height or break it up into equating vh, ie 20vh+10vh+40vh=70vh.

Wenn ich vh verwende, schaue ich immer zu, um sicherzustellen, dass ich diesen Teil des Bildschirms ausfülle. Probleme wie die, die Sie erleben, treten auf, wenn Ihre Höhen nicht mit dem übergeordneten Raster/Container übereinstimmen. Im Editor werden Sie feststellen, dass die Seitenhöhe springt, zusammenbricht oder sich von selbst erweitert. Wenn dies bei Ihnen der Fall ist, stellen Sie sicher, dass ein Teil der Seite entweder eine Mindesthöhe hat oder in gleich vh aufteilen, dh 20vh+10vh+40vh=70vh.

Perhaps you can take a screen shot of your page showing the grid layout for that section, and I can further assist.

I hope this helps.

Ihrer Seite machen, der das Rasterlayout für diesen Abschnitt zeigt, und ich kann Ihnen weiterhelfen.

Ich hoffe das hilft.

Hey! Thank you a lot for the reply, it helped me understand the topic a little bit more!

However I still got a problem with the auto height on my page which I don’t know how to solve:

Here you can see the section I have trouble with.
In this section you see the orange box with some text inside of it. Looks all good and tidy. However when I scale down to a smaller screen size, this happens:

The textbox gets smaller and longer to fit the text as it’s supposed to and the orange grows accordingly.
However the section, for some reason, although it has the exact same height settings as the orange box, stays the same size.

the height settings of the orange box and section are:
height: Auto
min H: 70vh (because I want the orange Box to be at least 70vh
max H: none

I know there are some Workarounds like letting the textbox stay the same size and stuff, but I just can’t imagine that there is now way to just fit the Section size according to the boxes inside.

Do you know by any chance, an answer to that?

All the best and thank you!

@johannesgeiger , have you applied a grid to the section? And if you have done that, how are you aligning the gold container within that grid? Are you stretching to fill a set of rows and columns? Are you docking?

As @teejay suggests, it might be helpful if you took a screenshot with the grid visible.

Attached is a quick-and-dirty example of the kind of thing I’m talking about. I’ve applied a 3x3 grid to the section. The gold container is stretched to fill columns one and two and all the rows (one, two, and three). The image fills the rightmost two columns and only the middle row. I’ve adjusted the grid so it looks more-or-less like your layout.

With this approach, you can control the size and position of your gold container, along with the height of the section that holds it.

Why not have a single row and two column grid. You can adjust the placement and heights of all three elements.

The left column gets the yellow container and text, while the image shares whole role but has a controlled width?

Although @jim75924 's works too.

I noticed your comment about pages collapsing or expanding in the Editor. I am having a huge problem with this, and didnt understand your suggested fix. Currently, my pages have header+footer+sections all with heights specified in VH that add to 100. Min/max values are set to do the same. Works exactly as hoped in the published website. But in the editor, the page edited shrinks with each mouse click, ultimately to nothing. This seems a bug. Is there something I might be doing that causes this?