设置容器的高度，而内容没有指定的高度 - 仅填充

Question

我想不出解决办法。我有很多这样的方形 div： width=padding-bottom=16,6%

它在有许多 (72) 个正方形的屏幕上制作了一个漂亮的网格。每个内部都有一个带有图像的背景属性。

问题是我也有一个固定的底部条纹，我的问题是它与网格的最后一行重叠。

如何设置 margin-bottom ？没有指定 div 的高度。

我试图把它全部放在一个div中，但它认为内容的高度是0。

下面的代码，感谢您的任何想法。

HTML：

<div class="homemade-container">
<div class="square img_1-2"> </div>
THERE IS 72 DIVS LIKE THIS ONE, JUST WITH DIFFERENT SECOND CLASS NUMBER (BACKGROUND IMAGE)
</div>
<div class="lowermenu">
CONTENT
</div>

CSS：

.homemade-container{
    padding-bottom:75px;
}
.square{
    float:left;
    position: relative;
    width: 16.45%;
    padding-bottom : 16.45%;
    margin:0.1%;
    background-position:top center;
    background-repeat:no-repeat;
    background-size:cover;
}
.img_1-2{
    background-image:url('../portfolio/www/www24.jpg');
}
.lowermenu{
    color:#d4d4d4;
    width:100%;
    height:75px;
    background-color:#2b2b2b;
    position:fixed;
    bottom:0;
    left:0;
}

Answer 1

您可以简单地通过 CSS 为最后一个 div 添加边距：

div[class~='square']:last-of-type {
    margin-bottom: 90px;
}