将页脚保持在底部，但不固定

Question

我正在尝试为我的网站制作页脚，它是部分页脚，我将其呈现在布局中 application.html.erb 文件正文标记中的 <%= yield %> 下方。当页面加载时它位于底部，但当您滚动到底部时它停留在页面中间。我知道这样一个常见的问题。那里有很多重复的问题，但我还没有找到解决方案。我将正文和 html 设置为 100% 高度并将页脚的高度定义为一定数量的像素并将位置设置为绝对。那没有做到。这是我拥有的：

application.html.erb

  <body>


    <%= yield %>

    <%= render 'layouts/footer' %>
  </body>

_footer.html.erb

<div id="footer">
  Books4Reviews © 2018 All Rights Reserved
</div>

application.scss

@media screen and (max-device-width: 700px) {
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
html {
  width: 100%;
  height: 100%;
  margin: 0;
}


/* Footer */

#footer {
  bottom: 0; left: 0; right: 0;
  height: 50px;
  position: absolute;
}

Answer 1

去掉position:absolute。这将使您的页脚成为页面上的最后一个块级元素。你也可以去掉你的定位属性，bottom, right, left.

positon: absolute 将元素从文档流中取出——元素不会将其视为 "taking up space"，这就是为什么它看起来漂浮在事物之上的原因。

.rest-of-page {
  border: 1px solid red;
  height: 1000px;
}
.footer {
  border: 1px solid blue;
  height: 50px;
  text-align: center;
}

<div class="rest-of-page"></div>
<div class="footer">I am the foot</div>

Answer 2

我认为您想实现类似 this page 的效果，其中页脚始终位于底部，没有固定的高度。这是我的解决方案（使用 flex）：

HTML:

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

CSS:

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

然后您可以随意设置页脚的样式，它始终位于底部。我发现现在这是解决此问题的常见方法。 Tracker 的代码在 Github.

上开源

Answer 3

所以在我自己的项目中进行了大量研究和尝试之后，我想分享我的公式。不以此为荣，因为我确信我的方法是相似的，即使不是别人所做的副本，但是嘿，如果它能帮助你，那就太好了！

我要说的是：无论你的视图有多少内容或没有多少内容，无论你的视口有多大或多小，放大或缩小，该死的页脚都在底部！

Application.html.erb

<body>
    <div id="site_wrapper">
      <div id="site_content">
        <%= yield %>
      </div>
      <div id="footer"><h3>DMB Web Development, All Rights Reserved © 2019</h3></div>
    </div>
  </body>

Application.scss

body {
  margin-left: 20%;
  margin-right: 20%;
  position: relative;
  height: 100vh;
}


#site_wrapper {
  position: relative;
  min-height: 100vh;
  display: block;
}

#site_content {
  min-height: 100vh;
  padding-bottom: 100px;
  overflow: hidden;
  display: block;
  position: relative;
}
#footer {
  width: 100%;
  height: 50px;
  color: white;
  font-size: 12px;
  text-align: center;
  border-top-style: solid;
  border-top-width: medium;
  border-top-color: #807B7A;
  position: absolute;
  bottom: 0;
}

将页脚保持在底部，但不固定

keeping the footer at the bottom, but not fixed

html

css

ruby-on-rails

footer

Application.html.erb

Application.scss