css - parent 的最小高度和 child 的绝对位置

Question

我有这样的东西:

.c1-pattern {
    min-height: 100%;
}

因为这个 div 的所有父级都有 height: 100%，它工作正常并且在调整窗口大小或较小的分辨率后，图案不仅覆盖 window.height，而且覆盖所有div 向下滚动后。

在这个 .c1-pattern div 中，我不想将 div 与 position: absolute 和 overflow: hidden:

.c1-absolute {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    overflow: hidden;
}

问题来了。它只需要窗口 height - 而不是 min-height。因此，当我在较小的设备上观看网站时，.c1-pattern 可以正常工作，但 .c1-absolute 不会并以 window.height 结束.

有什么方法可以让它发挥作用吗？

回答:

.c1-patter{position:relative;}

目前一切正常。

Answer 1

演示 - http://jsfiddle.net/victor_007/5xsbnn3y/

尝试更改高度 min-height: 100vh; 这将采用窗口的高度，尽管 div 的高度为 200%

html,
body,
.cont {
  height: 200%;
}
.cont {
  border: 1px solid green;
  height: 200%;
}
.c1-pattern {
  min-height: 100vh;
  background: Red;
}

<div class="cont">
  <div class="c1-pattern">
    <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget</p>
  </div>

</div>