html - 保持Divs在同一高度

Question

我正在尝试弄清楚如何使所有行保持相同的高度。我遇到的问题是，当它们没有内容时，它们会缩小到填充高度。

完整示例可在此处找到:https://jsfiddle.net/c85ajj9a/

代码片段:

<div class="col-md-12">
                                    <div class="col-md-1 detail-box leftcolumn-bold">Co-Bor 1:</div>
                                    <div class="col-md-1 detail-box">Maria</div>
                                    <div class="col-md-1 detail-box">Smith</div>
                                    <div class="col-md-2 detail-box">699, 685, 675</div>
                                    <div class="col-md-1 detail-box">$6,500.00</div>
                                    <div class="col-md-2 detail-box email-text">maria.smith@gmail.com</div>
                                    <div class="col-md-2 detail-box">714-555-5555</div>
                                    <div class="col-md-2 detail-box">626-555-5555</div>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-1 detail-box leftcolumn-bold">Co-Bor 2:</div>
                                    <div class="col-md-1 detail-box"></div>
                                    <div class="col-md-1 detail-box"></div>
                                    <div class="col-md-2 detail-box"></div>
                                    <div class="col-md-1 detail-box"></div>
                                    <div class="col-md-2 detail-box email-text"></div>
                                    <div class="col-md-2 detail-box"></div>
                                    <div class="col-md-2 detail-box"></div>
                                </div>

Answer 1

即使没有内容，最小高度也会为行添加高度。

.detail-box {
    padding: 5px;
    overflow: auto;
    border: 1px solid #000000;
    text-align: center;
    font-size:18px;
    color:black;
    min-height:18px;
}