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

Question

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

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

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

如何设置底部边距？没有指定 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;
}