【问题标题】:footer stays fixed even with position set to absolute即使位置设置为绝对,页脚也保持固定
【发布时间】:2021-05-22 20:02:52
【问题描述】:

我正在尝试设计一个应该位于页面底部的简单页脚。换句话说,如果页面很长,用户需要向下滚动才能看到它。不知何故,页脚拒绝停留在那里,而是始终在浏览器窗口的底部可见。我认为只有将其位置设置为固定而不是绝对时才会发生这种情况。我是 Rails 新手,最重要的是,bootstrap 默认安装在项目中。认为这不会是一个问题,因为我不使用默认的页脚类。任何想法为什么会发生这种情况?

在 _footer.scss 中:

.footer-artcollabs {
  background-color: $grey-light-med;
  height: 72px;
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  p {
    margin: 0 30px 4px 30px;
  }
}

.foot-logo-container {
  margin-left: 30px;
  width: 44px;
  height: 42px;
}

在 _footer.html.erb 中:

<div class="footer-artcollabs">

  <div class="foot-logo-container">
    <%= render 'shared/logo' %>
  </div>
</div>

【问题讨论】:

    标签: html css footer


    【解决方案1】:
     position: absolute;
      bottom: 0;
    

    这是贴在页面底部的。

    https://www.w3schools.com/css/css_positioning.asp

    【讨论】:

    • 这正是我的代码中的内容(在 .footer-artcollabs 中)
    • 那是不正确的部分删除它。
    • 如果我这样做,页脚不会与比浏览器窗口短的页面底部对齐
    • 看不到完整代码无法真正评论
    • 页脚所在的每个页面的完整代码都不同。我正在寻找一种适用于内容很多的页面以及内容很少的页面的解决方案。页面的其余部分组织在 div 中(所有位置都相对或默认)
    猜你喜欢
    • 2011-09-14
    • 2019-06-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-27
    • 1970-01-01
    相关资源
    最近更新 更多