Css 在底部粘贴页脚

我希望页脚位于页面底部，代码如下：

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

位置：您应该使用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);
}

我不知道你所说的“当滚动条出现时，它会向左跳一点”是什么意思，因为你的页面上没有任何东西可以折叠并因此调整它的高度。所以要么滚动条就在那里，要么就不是

---

另外，如果您仍然希望页脚具有绝对位置，

min height

是您的朋友。

如果您查看这两张图片，当滚动条出现时，如果页脚的位置为：fixed，则页脚会向左跳

谢谢你的回答

/