我有这样的东西:
.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;}
目前一切正常。
最佳答案
演示 - 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>
关于css - parent 的最小高度和 child 的绝对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26960059/