Question

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

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

我试图获得如此处所示的某种网格（在图像中很难看到，但是底部有一个1px的白色行，我试图摆脱它。黑色是屏幕高度的结束）

Current productarea

@RenaatDeMuynck建议使用高级CSS3 grid or box-flex，因为我只使用谷歌浏览器。

网格似乎非常强大并且要求我在代码中做一些更改（很好）但在我去那里之前，我想确定我是否正确。

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

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

旧（浮动：左;）

<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>

[OLD Q]

我在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表示内部高度＆＃39;而不是＆＃39;外部高度＆＃39;。产品的高度是高度+边距 - 顶部+边距 - 底部的结果。由于您同时修复了内容和容器高度，因此它们永远不适合。

如果您希望您的容器100％被您的内容覆盖，请不要修复它的高度。

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

Answer 2

这是我的最终解决方案。它使用了Flexbox的新W3C定义（截至2012年8月，仅在Chrome 21 +中支持）

<强> HTML：

<ul class="products">
  <li>product 1</li>
  <li>product 2</li>
  <li>product 3</li>
  <li>...</li>
  <li>product n</li>
</ul>

<强> CSS：

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

ul.grid {
  /*  As of August 2012, only supported in Chrome 21+ */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  padding: 0;
  margin: 0;
  width: 600px;
  height: 100%;
  background: silver;
}

ul.grid > li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 98px; /* (600px / 6) - 2px for the borders  */
  overflow: hidden;
  border: outset 1px;
}

ul.grid > li.food {
  background-image: url(images/food.png);
  -webkit-background-size: 100%;
}

DEMO： http://codepen.io/anon/pen/unGrt

Answer 3

我找到了解决方案！

行css中的

height:100%; 产品css中的width:100%

Fiddle显示了这一点！ http://jsfiddle.net/h2Ya8/31/

感谢您的帮助！

CSS如何填充剩余空间（1 div与较小的div）

3 个答案: