Footer issues: not quite stick not quite fixed

1

In this codepen, i did a rough draft of what my actual app looks like

I have several problems please bear with me:

  1. How to make the footer stay in the view port all the time. That was my issue going in to this thing. The footer is to be at the bottom of the contents(the nav and the dash) or in front of them(??? not sure how to put it) so that when you scroll, the footer is always at the bottom of the view port not the contents. The footer is to NOT scroll with the contents
    image

image
image1163×580 34.8 KB

2. Doing the pen, i thought i managed to do that with individual scrolls being on the nav and dash. But I gave the footer div a height to test it and as you can see, some of the footer disappears with beneath the view port.
3. On the nav side, the scroll is limited. There is some content that is not shown unlike the dash content where scrolling to the end will show you content at the bottom. As a control on the nav side the last li tag says “The last thing” but it does not show up when you scroll. I want bottom of both scrolls to stop on top of the footer.

How do i go about it

Thank you.

3
  1. You need to set the height of the footer in ‘em’ not ‘px’.
  2. You then set the height of the nav and content to 100vh minus the footer height. (Warning: The ‘em’ values for these will not be the same as the footer.)
    If you don’t know how to do simple arithmetic in CSS check out:
    https://developer.mozilla.org/en-US/docs/Web/CSS/calc
4

Thank you very much

There probably might be texts of different fonts in the footer. Em is relative to the size of the current font. Will it have a problem with different font sizes in the footer.

If you look at the link again for the nav div through trial and error, i got 84vh as a perfect height above the footer. But if i use calc and say 100vh -1em(1em is the height of the footer) for the dash div, i dont get the div above the footer.
I must say i dont know what you want me to convert. It seems the calc function takes care of converting?

5

Yes, you can have different font sizes in the various parts of your page. What I’m saying is that if your footer has a height of 2em then the height of the nav will not be 100vh - 2em because the nav is a smaller font size, so the value of the em you need to subtract will be bigger.

84vh height on the nav will actually not work in all cases. As you make the browser taller you will see space between the nav and the footer. And as you make the browser shorter then you will see that the bottom of the nav gets lost under the footer again (and this also happens if you increase the text size).

If you follow the two steps I outlined above you will get what you want.

6

please bear with me but i am confused. So are you saying i should convert the em in the calc function to another unit? You said

You then set the height of the nav and content to 100vh minus the footer height.

The footer height is 1em. How do i find the correct em value for the calc function?
Are you saying set the em in this:

heigth: calc(100vh - 1em);

To the em of the nav and the dash? What does that mean?

Or i think you mean change the value of the em itself:

heigth: calc(100vh - 7em);

7

If the height of your footer is 2em, then the calculation for your nav is 100vh - Xem, where X is a numeric value that will be bigger than 2 because the font size in your nav is smaller than the font size in your footer. If the two font sizes were the same then the em value in the calculation would be the same as the height of your footer.

Let’s think about this in pixels. If you set the height of your footer to 100px then the height of your nav would be 100vh - 100px. This means that you want the nav to stretch all the way from the top of the browser down to 100px from the bottom of the browser. You need to stop at 100px because your footer takes up the bottom 100px of the page. So it’s the exact same thing when using ‘em’ except that the numbers will be different because you are using different font sizes in the footer and nav.

The reason you don’t want to use pixels for the height of the footer is because you want it to grow if the user increases the font size.