始终将页脚定位在视口底部答案

【问题标题】：Position footer always on viewport bottom始终将页脚定位在视口底部
【发布时间】：2020-02-17 16:20:32
【问题描述】：

我有一个包含用户名的页脚。我想始终在视口底部显示它。就像一个固定的底栏，但只在我的侧边栏上。

我使用函数

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;

    $('#footer').css('margin-top', (docHeight - footerTop) + 'px');

    $('#footer').removeClass('invisible');
}

这里面：

$( function () {
    setFooterStyle();
    window.onresize = setFooterStyle;
}

但是因为我使用了侧边栏，所以我认为 margin-top 会将页脚的像素数量放置在侧边栏下方而不是页面顶部下方。所以它在文档底部的某个地方，我必须滚动才能看到。

知道我做错了什么让文本始终位于视口底部，同时在滚动时调整大小和？

【问题讨论】：

请也提供html
这能回答你的问题吗？ How to make a sticky footer using CSS?

标签： javascript jquery css bootstrap-4

【解决方案1】：

您尝试执行的操作的总称是“粘滞页脚”。诀窍是在页脚上方为您的内容制作一个包装器 div，该 div 占据视口高度的 100%，然后在页脚上使用负边距将其向上移动与页脚高度相同的量。然后页脚总是在视口的底部。然后你需要在内容的底部添加填充，这样它就不会被页脚覆盖，因为页脚在布局的常规流程中不会占用空间。

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

https://css-tricks.com/couple-takes-sticky-footer/

【讨论】：