Stick footer at bottom

Question

I want my footer to be at the bottom of the page with the following code:

body:not(.theme-preset-active) footer#colophon {
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    color: #191919;
    background-color: transparent;
    font-size: 100%;
    }

But it ends up in the middle of the content.

I have tried with position:fixed like this:

body:not(.theme-preset-active) footer#colophon {
    padding-left: 15px;
    padding-right: 15px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    color: #191919;
    background-color: transparent;
    font-size: 100%;
    }

But the it wont cooperate with my scrollbar, it jumps a little bit left when the scrollbar appears. Code for scrollbar if that also can be a solution:

::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(65, 65, 65, 0.99);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

html{
    position: relative;
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
    background-color: transparent;
}

All help appreciated.

The webpage

/ R

Answer 1

If you look at this two pictures, my footer jumps left when the scrollbar appears, if it have the position: fixed.

Thanks for your answer!

/

Answer 2

position: fixed is what you should use, but you can also add the following:

body {
  --footer-height: 100px;
  min-height: 100vh; /* never use height, because you want the page to expand */
  padding-bottom: var(--footer-height);  /* to avoid footer being on top of relative elements within body */
}

footer {
  height: var(--footer-height);
}

I'm not sure what you mean with "it jumps a little bit left when the scrollbar appears" because you don't have anything on the page that fold out and therefor resizes the height of it. So either the scrollbar is there to begin with, or it's not.

Anways, min-height is your friend if you still want the footer to be have a absolute positioning.