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

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）设置为position：relative，但是当我在初始动画期间滚动时，我仍然可以看到我的内容。我很欣赏任何提示。

Answer 1

通过将.loader-overlay高度设置为100％，您告诉它占据其父级的100％。由于您的案例中的父级是body，它没有设定的高度，因此它的行为不会像您期望的那样。

我建议尝试CSS3 Viewport Height（vh）。像这样的东西会将div设置为视口的高度，视口可以跨设备动态变化：

height: 100vh;

话虽如此，您的content甚至不会隐藏溢出的div，因此无论您使用.loader-overlay做什么，它都会添加到您网页的高度。