具有 100% 高度项目的重叠砌体

Question

我正在尝试构建一个具有 100% 高度部分的布局 - 扭曲的是这是一个砌体布局，第一个砌体项目是加载时页面的 100% 高度/宽度（和响应式）。

在 100% 高度项目之后，我想要“常规”砌体（列、行等）

我遇到的问题是第一项 .grid-item grid-item--feature 与其他项重叠。我以前使用 ImagesLoaded 时遇到过这种情况，但从来没有使用过“空”网格。

我在一个月后重新拾起这个，可能忽略了一些非常简单的东西，但我已经整理了一个 little JS Fiddle here。我该如何解决这个问题？

Answer 1

试试这个代码：

.grid-item-feature { position: relative; height: 100vh;}

See this fiddle

vh的使用说明：

使用 vw/vh，我们可以将元素的大小调整为相对于 视口。 vw/vh 单位很有趣，因为 1 个单位反映 视口宽度的 1/100。使元素全高 例如，您可以将其设置为 height:100vh。