我有两个不同高度的 div 列，我希望它们具有相同的高度。我使用 padding-margin hack 实现了这一点，并为我的 div 列添加了以下 css：
.lane1 {
padding-bottom: 800px;
margin-bottom: -800px;
}
html 正在显示流程图。我想从每条车道的末端到两车道部分的底部有一条线，以获得连续图。
我试图通过一个带有 .LineFilling 类的附加 div 来实现这一点，这是一条向下的线，但我不知道这条线应该有多高。所以我把
position: absolute;
overflow: hidden;
在 .lane1-class 中并制作高度为 600px 的 .LineFilling-element ，但这不起作用，因为显示了溢出。有没有办法让 .LineFilling-element 延伸到车道的尽头？或者进一步扩展但溢出被切断？
感谢帮助。
编辑：我在这里在线发布了代码：点击这里查看代码
是的，纯css是可能的。我已经使用 display table-row 和 table-cell 属性来实现它。
HTML：
<div class="parent">
<div class="child">
<p>line 1</p>
</div>
<div class="child">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
</div>
CSS：
.parent{display:table-row;}
.child{display:table-cell;border:1px solid #ccc;padding:10px;}
p{margin:5px 0;}
见小提琴。
更新：可能的解决方案DEMO
这是该解决方案的演示。
在这个 DEMO 中，您会看到多个Rows，每个都Row可以有可变数量的列，而无需在标记中说明任何内容，也无需固定任何宽度。（宽度总是在列之间平均分配）。每列都称为ElementsHolder，并且可以有任意数量的Elements你想要的。
一行中的所有列将始终具有相同的高度，并且行中的最后一个箭头将填充该空间。
在 DEMO 中您可以看到 3Row秒。第一个Row有起点，所以那里不需要伸展。第二个Row有 3 ElementsHolder，没有在标记中说明任何特殊内容，其中 2 个将伸展以填补空白。第三个Row有 2 ElementsHolder，表现如预期。
请注意，无论Elements 高度如何，拉伸都有效。（其中一些有 2 或 3 行文本，效果很好）
如果您想使用该技术，您只需要实现其他类型的框和箭头（曲线等）
该解决方案是通过使用新的 CSS flex 模型完成的。方向是通过 设置的flex-direction: row;，每行都有ElementsHolders 宽度相等。
其中每一个ElementsHolder也是一个弹性盒子，但这次他的方向是相反的（flex-direction: column;）。
孩子的ElementsHolder是Elements & Arrows，我不希望他们有相同的高度，而是要跨越自然高度。除了最后一个箭头，它应该跨越容器的其余部分。
所有这些都是使用flex具有适当值的属性来实现的。
更多关于 flex-model 的信息可以在这里找到
我不知道我是否真的明白你需要什么。我试过以下
在laneContainer中添加一个新的绝对元素height: 100%与
#straightLine {
background-color: #FFBF80;
height: 100%;
left: 104px;
position: absolute;
width: 3px;
z-index: 5;
}
加上对其他一些对象的一些小修改，你会在小提琴中找到它们......
是你想要的吗？
与其添加另一个来填充空间，不如在左列div中添加一个类并设置样式来满足您的任何间距/行要求，这不是更容易吗？div
所以你可以有：
HTML：
<div class="twoColumn">
<div class="column">
<div class="step doubleRow">
<p>One step covering two rows here</p>
</div>
</div>
<div class="column">
<div class="step">
<p>Single size step</p>
</div>
<div class="step">
<p>Single size step</p>
</div>
</div>
</div>