当最后一个div向上移动时，如何使页面更短?

Question

我正在使用CSS规则将页面上的最终div向上移动窗口高度的30%，以便它故意直接遮盖上面的div的一部分：

div.container {
top: -30%;
font-size: 2rem;
background-color: #eee;
z-index: 1;
}

示例：网页末尾有 30% 的空白屏幕。

如何在页面底部不留空白空间(也是屏幕高度的 30%(的情况下执行此操作？

Answer 1

您还需要在容器底部添加负边距。您也可以为此保留-30%，尽管您的情况不需要太多。

div.container {
top: -30%;
font-size: 2rem;
background-color: #eee;
z-index: 1;
margin-bottom: -30%;
}

或者，您可以仅使用margin-top来实现相同的目标：

div.container {
margin-top: -15%;
font-size: 2rem;
background-color: #eee;
z-index: 1;
}