具有 100% 高度项目的重叠砌体
Overlapping Masonry with 100% height item
我正在尝试构建一个具有 100% 高度部分的布局 - 不同之处在于这是一个 Masonry 布局，第一个 Masonry 项目是加载页面的 100% height/width ( & 反应灵敏）。
在 100% 高度项目之后，我想要 'regular' 砌体（列、行等）
我遇到的问题是第一项 .grid-item grid-item--feature 与其他项目重叠。我以前用 ImagesLoaded 有过这个，但从来没有用过 'empty' 网格。
我在一个月后重新拾起这个，可能忽略了一些非常简单的东西，但我已经整理了一个 little JS Fiddle here。我该如何解决这个问题？
试试这个代码：
.grid-item-feature { position: relative; height: 100vh;}
vh的使用说明：
With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects
1/100th the width of the viewport. To make an element the full height
of the viewport, for example, you'd set it to height:100vh.
我正在尝试构建一个具有 100% 高度部分的布局 - 不同之处在于这是一个 Masonry 布局，第一个 Masonry 项目是加载页面的 100% height/width ( & 反应灵敏）。
在 100% 高度项目之后，我想要 'regular' 砌体（列、行等）
我遇到的问题是第一项 .grid-item grid-item--feature 与其他项目重叠。我以前用 ImagesLoaded 有过这个，但从来没有用过 'empty' 网格。
我在一个月后重新拾起这个，可能忽略了一些非常简单的东西，但我已经整理了一个 little JS Fiddle here。我该如何解决这个问题？
试试这个代码：
.grid-item-feature { position: relative; height: 100vh;}
vh的使用说明：
With vw/vh, we can size elements to be relative to the size of the viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th the width of the viewport. To make an element the full height of the viewport, for example, you'd set it to height:100vh.