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

Overlapping Masonry with 100% height item

本文关键字：重叠项目 100% 高度具有更新时间：2023-09-26

我正在尝试构建一个具有100%高度部分的布局-问题是这是一个砖石布局，第一个砖石项目是加载时页面的100%高度/宽度（&responsible）。

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

我遇到的问题是第一个项目.grid-item grid-item--feature与其他项目重叠。我以前在ImagesLoaded中遇到过这种情况，但从未使用过"空"网格。

一个月后，我会重新拿起这个，可能会忽略一些非常简单的东西，但我在这里整理了一个小JS Fiddle。如何解决此问题？

试试这个代码：

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

看看这个小提琴

vh:使用说明

使用vw/vh，我们可以根据视口。vw/vh单位很有趣，因为1个单位反映了视口宽度的1/100。使图元达到全高例如，您可以将其设置为高度：100vh。