当高度为百分比或自动时，Div消失

Question

我有一个奇怪的问题。我已经用CSS创建了一些图块，如下面的示例所示，当我设置图块的div高度和宽度（以像素为单位）时，它都能正常工作。

但是，当我将div高度设置为百分比（或者按照我的意愿设置为自动）时，div会消失。我可以毫无问题地将宽度设置为百分比。

问题可见this CodePen。

P.S。我想在没有任何Javascript或JQuery的情况下解决这个问题： - ）

非常感谢！

Answer 1

tile div中的所有元素都是绝对定位的，它们会将它们从文档流中移除，并使tile div高度为0（参见w3schools）。

从您的某个包含元素中移除position: absolute;（在您的情况下可能是标题），并将其display: block;。

这是一个有效的fork。