确保页脚将粘在页面底部并随内容弯曲答案

【问题标题】：Ensure footer will stick to bottom of page and flex with content确保页脚将粘在页面底部并随内容弯曲
【发布时间】：2017-02-12 16:30:35
【问题描述】：

我现在有一个页脚，它会粘在页面底部，但是当它运行到内容时，它会位于它的顶部。我显然希望它被它旁边的任何容器内容下推。

这是截图：

我想把那张桌子的底部往下推。这是我的 CSS 和 HTML

主体和容器 CSS

body {
  color: $base-text-color;
  margin: 0;
  padding: 0;
  background-color: $base-background-color;
}

.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  margin-bottom: 40px;
}

页脚 CSS

.footer {
  height: 40px;
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
}

应用程序 HTML

<body>
  <%= render 'shared/top_bar' %>
  <div class="container">
    <%= render 'shared/errors' %>
    <%= yield %>
  </div>
  <%= render 'shared/footer' %>
</body>

我真的被这个难住了，似乎找不到答案！非常感谢所有帮助！

【问题讨论】：

啊。我之前评论过你的问题，认为footer是容器的孩子:)
这可能会有所帮助...stackoverflow.com/questions/34796085/…

标签： html css responsive

【解决方案1】：

您想要的是一个粘性页脚而不是固定页脚。已修复，内容不会推送。粘性，它会一直停留在底部，直到被内容推送。请注意，在页脚中插入填充会影响其大小，您必须调整其他措施才能使其正常工作。请注意，我在 .container 中添加了 20px 的填充，因此我必须在底部边距和 .push div 上增加 40px。

我还建议您应该使用 Footer 元素而不是 div .footer

这里是代码

CSS

html, body {
  height: 100%;
  margin:0;
  padding:0;
}
.container {
  max-width: 1200px;
  text-align: center;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -80px;
  overflow: auto;
  padding:20px;
}
.push {
  height: 80px;
  margin-top: 0;
}
.footer {
  height: 40px;
  margin-top: 0;
  width: 100%;
  background: red;
  border: 0;
}

HTML

<body>
 <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam  
  <div class="push"></div>
 </div>
 <div class="footer">Footer</div>
</body>

http://codepen.io/luisalves/pen/ggZWGv

【讨论】：

【解决方案2】：

我从第 6 行开始在您的代码中添加 css

由于您的页脚高度是固定的，我利用了这一事实

如果你不明白请阅读并评论

body {
  color: black;
  margin: 0;
  padding: 0;
  background-color: green;
  /*magic is here */
  box-sizing: border-box;
  min-height: 100vh; 
  position: relative;
  padding-bottom: 40px;
  /*magic ends here */
}

.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  margin-bottom: 40px;
}

.footer {
  height: 40px;
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  lorem*10
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.</div>
  <div class="footer">i am here</div>
</body>
</html>

【讨论】：

【解决方案3】：

尝试为页脚添加不同的 div... 像这样的

<html>
  <body>
    <form id="form1" runat="server">
      <div>
        ..some code..
      </div>
      <div id="footer">
        <p align="center">Copyright &copy;</p>
      </div>
    </form>
  </body>
</html>

【讨论】：