javascript - CSS如何填充剩余空间(1个div和较小的div)

Question

[编辑重新打开 5-10]
我仍然有同样的问题!主要功能现在都实现了所以我回到这个问题。我按照建议将 Div 更改为 UL LI 列表。 但我仍然无法用产品填满整个区域。每个产品都有一定的宽度和高度。

*我正在为 Elo TouchSystems 1529L 显示器制作这个。屏幕上有 6*10 个产品(左)和一些信息和选项(右)(目前不在图像中)它将在 Google Chrome Kiosk 中运行(全屏)*

我试图得到某种网格，如图所示(在图像中很难看到，但底部有一个 1px 的白色行，我试图摆脱它。黑色是屏幕高度的末端)

@RenaatDeMuynck 建议使用高级 CSS3 grid 或 box-flex，因为我只使用 Google Chrome。

网格看起来非常强大，需要我对代码进行一些更改(没关系)但在我去那里之前，我想确定我是否正确。

对于网格我必须做行？是的？ 这意味着列表不合适!

这是否意味着我需要返回到带有 div 的旧结构并添加行？

旧的(带 float:left;)

<div products>
    <div product>info</div>
    <div product>info</div>
    <div product>info</div>
    <div product>info</div>
    ...etc
</div>

网格新功能？？

<div products>
    <div row>
        <div product>info</div>
        <div product>info</div>
        <div product>info</div>
        ...etc
    </div>
    <div row>
        <div product>info</div>
        <div product>info</div>
        <div product>info</div>
        ...etc
    </div>
    ...etc
</div>

---

---

[老问题]

我在 1 个“产品”ul

中显示了多个“产品”li

for ( i = 0; i < totalProductsOnScreen; i++) {
    HTMLContent += "<li class=productDiv id=empty" + i + " onclick='#'></li>";
} 
document.getElementById("productsUL").innerHTML = (HTMLContent + "<div style='clear:both'></div>");

不要提及 id 和 onclick。它是我在此代码下填写的内容

这是更新的 CSS

#productsDiv {
    float: left;
    width: 70%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.productDiv {
    list-style: none;
    padding: 0px;
    margin: 0px;
    float: left;
    box-sizing: border-box;
    border: outset;
    border-width: 1px 1px 1px 1px;
    width: 16.66%;/*14.2857%;*/
    height: 10%;
    max-height: 10%;
}

当前代码给出了这个: postimage.org image
(必须是一个链接，因为作为初学者，我不允许发布图片)

它不是很明显，但在最底部的 productsDiv 中有 1 个未使用的像素。 (红色)。
那没什么大不了的。但是当我放大和缩小时，它会发生变化。有时它的 4 个像素未使用或它的 2 个像素太多。所以我想通过给 productDiv 的最后一行剩余高度来解决这个问题。

我怎样才能做到这一点？

Answer 1

请记住，height 表示“内部高度”，而不是“外部高度”。您产品的高度是 height + margin-top + margin-bottom 的结果。由于您固定了内容和容器的高度，因此它们并不总是适合。

如果您希望容器 100% 被内容覆盖，请不要固定其高度。

请记住，由于 productsDiv 仅包含 float 对象，因此在某些浏览器中它可能没有高度。你可能需要破解一点。一个众所周知的是 zoom: 1; overflow: auto，但它有时会引入滚动条。更多信息:http://www.electrictoolbox.com/clear-float-overflow-auto/