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

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;

}

当我向下滚动时，我的页脚也会滚动，当我删除 height:100% 页脚时工作正常，但我需要 height:100% 用于我的包装滚动条，因为我在 body 中禁用了它(我需要这样做)。我想为 body 和 .wrapper 保留 height:100% 但那个页脚总是在底部。我怎样才能使用 css 做到这一点？

Answer 1

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