Html 需要使用div标签的虚拟现实，但它不能达到100%的高度

使用div标记查找垂直标尺。我想要这样的东西。

我的代码

CSS:

但vr并不是100%的高度。 帮助我。

---

感谢您不要使用vr div，而是在左侧元素上应用边框：

.acc .debit {
  border-right: 3px solid white;
}

这也是高层人力资源的编制方式

这里有一个

如果您不想为宽度而烦恼，可以从左侧应用一半边框，从另一侧应用一半边框，或者切换框大小。

尝试如下：

CSS:

---

当一侧的高度大于另一侧时，它将不起作用。在您的情况下，如果借方的高度是150px，贷方的高度是200px，那么50px的高度边界将丢失。。

.acc .debit {
  border-right: 3px solid white;
}

 .acc {
    float:left;
    width:400px;
    height:auto;
    overflow:hidden;
    border:#FFF solid 3px;
    background-color:#319dba;
    position: relative;
}
.acc .title {
    width:100%;
    height:30px;
    color:#FFF;
    text-align:center;
    padding-top:5px;
    border-bottom:3px #FFFFFF solid;
}
.acc .debit {
    float:left;
    width:198px;
    height:auto;
}
.acc .vr {
    width:2px;
    height:100%;
    background-color:#f00;
    border:1px solid #f00;
    height: 100%;
    position: absolute;
    right: 0;
    left:50%;
}
.acc .credit {
    float:right;
    width:198px;
    height:auto;
}
.acc .row {
    width:100%;
    height:25px;
}