Sticky Footer: bottom value does not correspond to desired position

[user-4'33'']

Hey there,

I want the first row of my footer page (which is in total less high than the full viewport) to be sticky at initial project page visit.

My footer page is structured like this

1. Row 1 with class .footerMenu

• Stack with a full-width line and text box
• its height could be calculated with

calc(
  var(--line-strokewidth) + 
  var(--menu-top-padding) +
  var(--menu-font-size) +
  var(--menu-bottom-padding)
)

where

:root {
    --line-strokewidth: 3px;
    --menu-top-padding: 0.29vw;
    --menu-font-size: 2.63vw;
    --menu-bottom-padding: 0.29vw;
}

2. Row 2 with class .footerContent and custom row height of 22vh

3. Bottom frame: 5% via LayTheme GUI

When writing

#footer-region {
    position: sticky;
    /* negative sum of custom height of row 2 + 5 % bottom frame */
    bottom: calc(-1 * (22vh + 5vh));
    width: 100%;
    z-index: 9;
}

the position of the (contact) menu is still too high. It should be like on the frontpage where I did not use the footer, where it's still hardcoded.

It also makes no difference when I turn off or on “Sticky Footer – Will position footer at bottom when content is smaller than browser-height” via LayOptions → Footers.

I would be thankful for any help since I don't know how to proceed after various numerous tries... :'-)

Firefox, Laytheme 9.7.9.

[arminunruh]

hey!

i remember, i think we talked about this a long time ago.

i think you cant use a vw font-size to calculate the height of the text line.
i think you need to use a px font size and a px line-height. like:

font-size: 20px;
line-height: 25px;

if the text is one line, then the line-height is the height of that text and you can use that for a height calculation.
in our case:

all your height values (except your font-size height value)

• 25px

the font size in vw or vh is not the font height.

just set bottom to 0 here in your custom css, i think:

.row4descriptionMenu {
position: sticky;
bottom: 0;
width: 100%;
z-index: 1;
}

as you can see in the css, if you use a percentage value for frame top or frame bottom, it is really just a percentage value:

you need to know, 5% is not the same as 5vw.
the percentage values are always relative to their parent.
i think 5vw can bigger than 5% because it calculates the viewportwidth, including the scrollbar width. but im not too sure about that.
also % widths are relative to their parent which means if you have a div that is like 50% of the screen width.
then you have another 50% width div inside, that will actually be 25% of the whole screen width. but im not sure if any of that applies to your case :D

[user-4'33'']

Thanks for your quick response! =)

Okay, will remember that and replace these values – but does this actually come into play for the bottom value of #footer-region?

Setting bottom = 0 inside of .row4descriptionMenu did not help since this menu (description) should be placed "on top" of (contact) like on the front page...

I also tried debugging without the 5% bottom frame and just using bottom: -22vh which also was not successful. So my guess is that there must be sth else...

I have the feeling that the footer-region shifts positions in some hidden way? Since the logic itself should be correct, is it?

[arminunruh]

mh mh i see.

do you mind if we set up a google meet?
i think it may be easier to make it work together!
i will send u an email