使页脚粘在底部而不粘答案

【问题标题】：Make footer stick to the bottom without being sticky使页脚粘在底部而不粘
【发布时间】：2018-04-19 10:03:23
【问题描述】：

我有一个在我的网络应用程序中使用的页脚，如果内容小于屏幕尺寸，我需要将其显示在屏幕底部，但如果内容更大，则不要粘贴（即我需要只有在内容大于屏幕尺寸时向下滚动才能看到它）

我发现多个问题和主题分别讨论，但没有一起讨论。

【问题讨论】：

标签： css

【解决方案1】：

你在这里：

head, body {
  height: 100%;
  padding-bottom: 40px;
  position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: gray;
  padding: 10px;
  text-align: center;
}

<h1>awesome page</h1>
<p>awesome content</p>
<div class="footer">
  awesome footer
</div>

【讨论】：

与下面@Daniel 的回答相同的问题
如果内容比屏幕大，我的解决方案有效 -> 页脚位于页面底部，您需要向下滚动到它（我做了一些更改）
我在我的应用上试过了，相反，它总是粘在浏览器的底部，而不是应用程序的底部。我不需要向下滚动来找到它
你添加了相对于你的 body 和 html 的位置吗？
我已经将它添加到 html，而不是 body，当我将它添加到 body 时，它“浮动”在底部，它甚至没有粘在底部

【解决方案2】：

将主体或包含元素的最小高度设置为 100vh，然后将页脚绝对定位在元素的底部：

.container {
  min-height: 100vh;
  background: firebrick;
  position: relative;
}

footer {
  background: lime;
  box-sizing: border-box;
  padding: 20px;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

<div class="container">
  <footer></footer>
</div>

【讨论】：

我以前试过类似的东西，它的问题是它一直粘在页面底部，即如果有内容超过页面大小，我不需要向下滚动以找到页脚，它将始终显示，这就是我现在需要的
您最初的问题是，如果页面内容增加，您不想在页脚粘贴，您可以这样做吗？
不，我说的是“如果内容大于屏幕大小，只有向下滚动才能找到我才需要看到”
还是同样的问题
也许可以尝试给出一个直观的例子来说明你的意思，并将其添加到原始帖子中

【解决方案3】：

你可以用 flexbox 做到这一点：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        min-height: 100%;
      }
      .all {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100%;
        background-color: yellow;
      }
      .content {
        background-color: red;
      }
      .footer {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="all">
      <div class="content">
        Content...
      </div>
      <div class="footer">
        Footer...
      </div>
    </div>
  </body>
</html>

【讨论】：

我需要支持一些旧版本的ie，所以很遗憾不能和他们一起使用