重叠砌体，100％高度项目

Question

我正在尝试构建一个高度为100％的布局 - 扭曲是这是一个砌体布局，第一个Masonry项目是加载页面的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。使元素成为全高   例如，您将视口设置为高度：100vh。