Question

我的粘性页脚有一个绝对位置的问题，

  <div class="wrapper">
    <div class="content">
      <p>Content</p>
    </div>
    <div class="footer">
      Footer  
    </div>
  </div>

body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  width: 100%
}

.wrapper {
  position: absolute;

  margin: 0;
  padding: 0;

  min-height: 100%;
  height: 100%;
  width: 100%;

  overflow: auto; 

  background: blue;
}

.footer {
  position: absolute;

  bottom: 0;
  height: 100px;
  width: 100%;

  background: red;

}

当我向下滚动我的页脚也滚动，当我删除高度：100％页脚工作正常，但我需要高度：100％我的滚动条包装，因为我在身体禁用它（我需要这样做）。我希望保持身高：100％用于身体和.wrapper，但是这个页脚总是在底部。我怎么能用css来做呢？

Answer 1

如果你需要你的页脚总是在底部看这个小提琴：http://jsfiddle.net/2n9okg1b/3/

在小提琴中，我使用页脚CSS中的poition: fixed;。修复位置会告诉浏览器始终将元素保留在您定义它们的位置。

<强>更新

我更新了小提琴链接。 http://jsfiddle.net/2n9okg1b/3/
通过此更新，我使用jQuery检测页脚是否在窗口下方。如果页脚位于窗口下方，我将页脚位置设置为固定。如果页脚不在窗口下方，我将页脚的位置设置为相对位置。这允许页脚始终位于内容的底部或窗口的底部。

Answer 2

我遇到同样的问题，使用height: 100vh;我希望对你有用！

使用溢出自动设置div中位置绝对值的高度

2 个答案: