Вставьте нижний колонтитул внизу

Question

Я хочу, чтобы мой нижний колонтитул находился внизу страницы со следующим кодом:

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%;
    }

Но он заканчивается в середине содержимого.

Я пытался с положение: фиксировано так:

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%;
    }

Но если он не будет взаимодействовать с моей полосой прокрутки, он немного переместится влево, когда появится полоса прокрутки. Код для полосы прокрутки, если это также может быть решением:

::-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;
}

Вся помощь приветствуется.

Веб-страница

/ R

Answer 1

Если вы посмотрите на эти две картинки, мой нижний колонтитул переместится влево, когда появится полоса прокрутки, если она имеет положение: исправлено.

Спасибо за ваш ответ!

/

Answer 2

position: fixed - это то, что вы должны использовать, но вы также можете добавить следующее:

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);
}

Я не уверен, что вы имеете в виду, когда под словом "полоса прокрутки" появляется немного влево потому что у вас нет на странице ничего, что бы раскрылось и, следовательно, изменило его высоту. Таким образом, либо полоса прокрутки существует, либо ее нет.

Anways, min-height - ваш друг, если вы все еще хотите, чтобы нижний колонтитул имел абсолютное позиционирование.