时间戳

首页 > 解决方案 > 在底部粘贴页脚

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

但它最终出现在内容的中间。

我试过使用 position:fixed 像这样：

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

标签： cssfooter

解决方案

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

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

无论如何，min-height如果您仍然希望页脚具有绝对定位，是您的朋友。

推荐阅读