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

时间：2017-02-12 16:30:36

标签： html css responsive

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

以下是截图：

enter image description here

我希望那张桌子的底部能够将其推倒。这是我的CSS和HTML

BODY AND CONTAINER 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;
}

FOOTER CSS 

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

APPLICATION HTML 

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

我真的被这个难倒，似乎无法找到答案！所有的帮助都非常感谢！

3 个答案:

答案 0 :(得分：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

答案 1 :(得分：0)

我在第6行的代码中添加了css

当你的页脚高度固定时，我已经利用了这个事实

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

尝试为页脚添加不同的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>
相关问题
最新问题