确保页脚将贴在页面底部并随内容变化

Question

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

这是截图：

我想要那个table的底部把它往下推。这是我的 CSS 和 HTML

BODY 和容器 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>

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

Answer 1

我已经在第 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>

Answer 2

尝试为页脚添加不同的 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>

Answer 3

您想要的是粘性页脚，而不是固定页脚。固定，内容不会推送它。粘性，它将一直保持在底部，直到它被内容推动。请注意，在页脚中插入填充会影响其大小，您必须调整其他措施才能使其正常工作。请注意，我向 .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

确保页脚将贴在页面底部并随内容变化

Ensure footer will stick to bottom of page and flex with content

html

css

responsive

BODY 和容器 CSS

页脚 CSS

申请HTML