Question

我正在尝试为我的网站创建页脚，这是一个局部页面，我将其呈现在布局中application.html.erb文件的body标签中<％= yield％>下面。页面加载时它位于页面底部，但是当您滚动到页面底部时，它位于页面中间。我知道如此常见的问题。那里有这么多重复的问题，但是我还没有找到解决方案。我将body和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将元素从文档流中剔除-元素不会将其视为“占用空间”，这就是为什么它似乎漂浮在事物之上的原因。

.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：

arules

CSS：

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

然后，您可以根据需要设置页脚的样式，并且始终位于底部。我发现这现在是解决此问题的常用方法。 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;
}

将页脚放在底部，但不固定

3 个答案:

Application.html.erb

Application.scss