[newbie] sticky footer css, a solution

(AS ALWAYS THERE IS A TLDR BELOW)

The sticky footer. If you have been searching for a while then i think you know what a sticky footer is by now (if not here is a good explanation of one. The challenge is that there is no short way of doing “position stay down please” like so:

position:stay-at-the-bottom-please-thanks-k-bye

You sadly need to know what is going on and what other components/elements are invovled in order to get the position of the footer right at all times…sticky footer style kinda times.

So we now know that there is no one position solution and no position: “sticky” is not an option<insert sarcastic tone>

I tried with the min-height set to 100%, but no dice for me for some reason. The sticky footer is a tricky concept to catch. You need to understand the position property and also its relationship with the absolute position.

Think of the absolute position… its relative to the other style/component overall position.

(had to add a pause when proof reading the sentence)

If this doesn’t work..i would only imagine that the scope of your relative element is not aware of the style that has the position of absolute. Its ….relative to your project and how its structured.

The margin and padding being set to zero is to make sure that the “min-height” takes on the full page. In some cases you may not want to have a scroll bar showing when the page is blank.

TLDR

Of course this is what worked and made sense to me i’m open to update this post or remove it entirely 🙂 have a great evening. (Yes this is a repost on a footer topic that i tried to cover and understand and to which i didn’t understand, so this should work i’m sure of it)

html,
body {
  margin: 0;
  padding: 0;
  
}
.wrapper {
    min-height: 100vh;
    position: relative;
    background-color: rgb(227, 228, 231);
}

.content {
    min-height: 100%;
}

.footer {
    position: absolute;
    width: 100%;
    color: rgb(42, 63, 121);
    height: 100px;
    bottom: 0px;
    left: 0px;
}

Notes:

html, body style updates is to ensure that the wrapper class takes in the whole screen size without padding

.wrapper has that min-height: 100vh (100% of the view height of the screen/device,
position is relative, think of it as a note of where this element is

.footer position absolute, accordance to the relative positioned element
bottom and left refers to setting the element relative to the other element and
place element at the 0th bottom left px of the screen…of the element

Sadly i only have an angular sample project, but it is better than nothing and the results stay the same this uses basic css and works on IE so.. apparently flex box and sticky footer doesn’t work for IE so i could be corrected on this.

Repo for your tinkering: tony2tones github