html - 生成的 div 的可变水平大小

Question

需要正确格式化的帮助...因此，此网页/应用程序会生成一小组框，作为资源使用趋势的基本图表。

gHolder 和 graphContainer 是固定的，graphBar 类每秒生成一个，直到固定数量的条形图(为简洁起见，我只包含了一些)最后应该在一个框中有一个总百分比(也是用 Javascript 生成的)

目前，如果我有固定数量的 graphBar 条目小于我期望的最小屏幕分辨率，我就可以完成这项工作。

我想动态调整大小......但不幸的是，当我尝试使容器等于可用区域的大小时......它要么留下一个很大的空白区域......或者如果我有更多的graphBar条目然后它可以显示它包装它们而不是 overflow hidden 。

我目前使用的是 CSS 表格函数，这是我认为的问题……但我似乎无法以任何其他方式完成这项工作。

一般形状的图像:

基本的 HTML 结构:

<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
</div>

这是问题的一个 fiddle 。请试一试，看看您是否能想出一个好的做事方式:

https://jsfiddle.net/84recnzg/

Answer 1

您只需更改您提供的 JSFiddle 中的 CSS 样式即可实现此目的。例如，一些更改将是:

• 添加一些位置:父级的relative，内部框的absolute。
• 为 .graphContainer 设置一个非常大的宽度。
• 将父级的溢出设置为隐藏。

.gHolder {
    height: 102px;
    border: 1px solid #555;
    position:relative;
    width:auto;
    overflow:hidden;    
}

.graphContainer {
    width: 100000px;
    height:0px;
    position:absolute;
    bottom:0px;
    right:100px;
    display: table-cell;
    vertical-align: bottom;
    border-right: 0px;
    cursor: pointer;
    margin-bottom: 16px;
    text-align: right;
    overflow: visible;
}

.graphInfo {
    width: 100px;
    position:absolute;
    top:0;
    right:0;
    display: table-cell;
    height: 102px;
    vertical-align: middle;
    border-left: 0px;
    background-color: #F00;
}
.graphBar {
    position: relative;
    width: 7px;
    display: inline-block;
    background-color: blue;
    margin-right: 0px;
}

<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:8px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:16px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:2px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:9px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:15px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphInfo">
    <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
  </div>
</div>

你可以在这个 JSFiddle 上看到这个例子:https://jsfiddle.net/84recnzg/2/ ，您仍然需要尝试其他样式以使它们适合(例如:.graphInfo 框中的文本)。

---

但是设置一个非常大的width有一个问题:如果你让它运行足够长的时间，图形条的数量就会溢出，你就会遇到两条线的问题.

一个快速的解决方案是每次添加图形条时使用 JavaScript 动态设置 宽度(宽度 = 条的数量 * 条的空间，其中条的空间将是条的宽度 + 它与下一个条的间距)。

像这样(我为每个条使用了 11px):

document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 11) + "px";

您可以在这个 JSFiddle 中看到:https://jsfiddle.net/84recnzg/3/

---

解决以下评论中提到的问题:

• 添加一个display:table 并指定图表框的宽度
• 删除图形容器的高度和宽度

function addBar() {
    
    // add a new bar with a random height
    aux = document.createElement("div");
    aux.className = "graphBar percent_low";
    aux.style.marginLeft = "4px";
    aux.style.height = Math.floor(Math.random()*99 + 1) + "px";
    document.getElementById("CPUHistoryGraph").appendChild(aux);
  
    // recalculate width for the graph area 
    document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 12) + "px";
}

// recalculate width for the graph area
document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 12) + "px";

.gHolder {
    height: 102px;
    border: 1px solid #555;
    position:relative;
    overflow:hidden;  
    display:table;
    width:100%;
}

.graphContainer {
    /*width:100000px;
    height:102;*/
    position:absolute;
    bottom:0;
    right:100px;
    display: table-cell;
    vertical-align: bottom;
    border-right: 0px;
    cursor: pointer;
    text-align: right;
    overflow: visible;
}

.graphInfo {
    width: 100px;
    position:absolute;
    top:0;
    right:0;
    display: table-cell;
    height: 102px;
    vertical-align: middle;
    border-left: 0px;
    background-color: #F00;
}
.graphBar {
    position: relative;
    width: 7px;
    display: inline-block;
    background-color: blue;
    margin-right: 0px;
}

<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:8px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:16px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:2px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:9px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:15px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphInfo">
    <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
  </div>
</div>

<button onclick="addBar();">Add bar</button>

你也可以在这个 JSFiddle 上看到它:https://jsfiddle.net/84recnzg/9/

出于某种原因，在 JSFiddle 中，所有条形图都显示为与底部对齐，但在上面的演示中，有些条形图似乎偏离了 1px(不是全部，只是一些)。有点奇怪。