尽管设置了高度，但隐藏的溢出不起作用

Question

我无法隐藏溢出：http://codepen.io/aiwatko/pen/zKjaLx

.loader-overlay {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  background-color: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

我浏览了以前的线程：我将高度赋予了溢出的元素：隐藏，我将另一个容器（我的内容div）设置为位置：相对的，但是当我滚动时初始动画，我仍然可以看到下面的内容。我会很感激任何提示。

Answer 1

通过将您的 .loader-overlay 高度设置为 100%，您告诉它占据其 parent 的 100%。由于您的 parent 是 body，它没有设置高度，因此它不会像您期望的那样运行。

我建议尝试 CSS3 视口高度 (vh)。像这样的东西会将 div 设置为视口的高度，它可以在设备之间动态变化：

height: 100vh;

这就是说，您的 content 甚至不在隐藏溢出的 div 中，因此无论您对 .loader-overlay 做什么，它都会增加您的页面高度。

尽管设置了高度，但隐藏的溢出不起作用

Overflow hidden doesn't work despite having height set

html

css

jquery

animation

overflow