HTML与CSS实现Vertical Bar Chart（垂直柱状图）的异常修复咨询

安全阿岳

2026-10-4

问题修复方案

问题1：底部两条线条粘连重合

原因：现有代码中.barchart-Time高度设为25%，5个刻度元素总高度为125%，最底部的25刻度线刚好和.barchart的底部tomato边框重合。
修复方法：
将.barchart-Time的高度修改为20%，5个刻度元素刚好占满100%容器高度，25刻度线对应容器80%高度位置，自然和底部0刻度边框错开：

.barchart-Time {
  height: 20%; /* 原属性为25%，修改为20% */
  vertical-align: middle;
  position: relative;
}

问题2：柱状元素height百分比设置不符合预期

原因：

柱状高度百分比对应逻辑错误：现有刻度最大值为125，数值和高度的对应关系为高度百分比 = (当前数值 / 最大刻度值125) * 100%，原代码直接用数值当百分比导致对齐偏差。
柱状父容器未预留底部标签位置，导致柱状高度计算范围和刻度范围不匹配。
修复方法：
调整柱状容器样式，预留底部标签位置，保证高度计算范围和刻度范围一致：

.barchart {
 display: table;
 table-layout: fixed;
 height: 100%;
 width: 100%;
 border-bottom: 3px solid tomato;
 padding-bottom: 30px; /* 新增：预留底部标签高度 */
 box-sizing: border-box; /* 新增：padding计入总高度，不会溢出容器 */
}
.barchart-BarFooter {
  position: absolute;
  text-align: center;
  height: 30px; /* 原属性为10%，修改为固定高度更可控 */
  width: 100%;
  bottom: -30px; /* 新增：放在容器预留的padding区域 */
}