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-图案{位置：相对;}

现在一切正常。

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>

父母的最小身高和孩子的绝对位置

1 个答案: