Browser Height in relation to Row Height

[tinjessen]

Hi there,

I am using "browser height as row height" quite often at the beginning of a project page, but I would like the row not to have 100% of the height of the browser window, but 100% -48px, in order to show a little bit (48px) of the next content below, so that the user will know that he/she has to scroll down. Is there a way to do this?

Best regards,
tin

[edgrbnz]

I thought this would be easy,…

Assign a class to the row in question (I called it _80vh in my example below).

Then I tried something along these lines to define that the viewport height is just 80% instead of 100% (which is what Use Browser Height For Row Height is doing):

._80vh{
    height: 80vh !important;
}

Unfortunately that one doesn’t stick. The 100vh from Lay’s markup seems to be stronger still.
I’m sure @mariusjopen can point out my error here.

[tinjessen]

Thanks for trying though! Would be great if someone knows a solution.

[mariusjopen]

Dear @tinjessen
it should work.

Give it an ID or CLASS and then use a CSS like this:

.CLASS {
    height: calc(100vh - 40px);
}

Do not activate the browser-height = window-height.

Best!

Marius

[edgrbnz]

@mariusjopen said in Browser Height in relation to Row Height:

Do not activate the browser-height = window-height.

That’s the trick❗️😀
Only thing I was experiencing with this while testing is that the placed image is no longer aligned in the middle although the option is set to do so.