Question

我想不出解决方案。我有很多像这样的方形div：宽度=填充底= 16,6％

它在屏幕上制作了一个很好的网格，有很多（72）个正方形。每个内部都是带有图像的背景属性。

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

如何设置保证金底部？ 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;
}

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

1 个答案: