添加始终显示在屏幕底部的页脚？答案

【问题标题】：Adding a footer that is always displayed at bottom of screen?添加始终显示在屏幕底部的页脚？
【发布时间】：2011-09-04 10:55:13
【问题描述】：

即使页面内容非常小，如何添加始终位于屏幕底部的页脚

例如问题，假设我有一个页面没有显示那么多，因此页脚位于屏幕中间。我可以确保如果页面没有很多内容，那么页脚就在屏幕底部吗？

更新

当没有足够的内容填满整个屏幕时，我只想要一个位于屏幕底部的页脚（即我不希望页脚出现在屏幕中间），然后如果有足够的内容让它位于页面底部。

【问题讨论】：

How can I force my footer to stick to the bottom of any page in CSS? 的可能重复项。从这个问题听起来你正在寻找sticky-footer？

标签： html css screen footer sticky-footer

【解决方案1】：

使用以下 css 属性：

position: fixed;
bottom: 0px;

【讨论】：

这很好用，但我不希望它成为一个粘性页脚，如果页面上有很多内容我只想让它下降到页面底部。
@Sean: "if there is a lot of content on the page i just want it to go down to the bottom of the page" 这正是粘页脚的作用：ryanfait.com/sticky-footer - 内容不多：jsfiddle.net/KMQxC 与大量内容：jsfiddle.net/KMQxC/1 编辑：对您的问题的评论："i just want one that is at the bottom of the screen when there is not enough content to fill the whole screen" - 我现在真的很困惑您想要什么。对不起，如果我在这里不理解你。
@三十点我的错，我认为粘性页脚总是在屏幕底部而不是页面底部，我会尝试你链接到的那个例子，对不起。跨度>

【解决方案2】：

您正在寻找“粘性页脚”，本文展示了您可以使用的一些技术：

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

这是 flexbox 版本：http://codepen.io/chriscoyier/pen/RRbKrL

HTML：

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS：

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

【讨论】：

【解决方案3】：

这是一个纯 CSS 的解决方案，不需要 jQuery。使包装器的最小高度为 100% 并相对定位，然后将页脚绝对定位到左下角：

#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

Source

【讨论】：

链接的答案很可能会被删除，尽量使其成为一个独立的答案，保留参考链接:)

【解决方案4】：

你也可以对位置使用sticky，如下所示：

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

您可以运行此代码来查看这是否是您的类型固定页脚正在寻找。

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>

【讨论】：

【解决方案5】：

您需要使用绑定到页面底部的固定位置元素。

假设你使用一个 div 来包含页脚，你会想要一些像这样的 CSS：

div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}

您可能希望在用户调整表单大小时更新高度和宽度。您可能还需要调整页面加载的宽度。

【讨论】：

【解决方案6】：

使用引导类

 <footer class="container-fluid text-center">
   <div class="footer navbar-inverse navbar-fixed-bottom">
     <p>Footer is here</p>
   </div>
 </footer>

【讨论】：