三个水平对齐的div，基于百分比具有相同的高度

Question

我有以下代码：

JSFIDDLE 链接

该 html 代码：

<div class="Row">
<div class="Column">C1<br>asdasd</div>
<div class="Column">C2</div>
<div class="Column3">a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br></div>

css 代码：

.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
    height: 30%;
}
.Column
{
    display: table-cell;
    background-color: #0099ff;
}
.Column3
{
    display: table-cell;
    background-color: #0099ff;
    height: 30%;
    overflow: scroll;
}

我已经水平对齐了三个div，如

小提琴代码所示，但我希望将所有div 的高度固定在屏幕尺寸的 30%，无论任何一个div 中的内容有多大。如小提琴代码所示，divs 自动缩放到包含最多内容的div 的最大高度。

有没有办法将div 高度限制为 30 的百分比而不是像素，以便仅使用 css 将其应用于同一行中的所有剩余div。

我碰巧阅读了以下链接，了解div 中的相同高度，但它与将所有div 的高度设置为具有最大高度的元素有关。等高链接

任何帮助将不胜感激。谢谢。

Answer 1

也许是这样的：

.Column {
    height: 30vh;
    overflow-y: auto;
}

Answer 2

如果你必须使用table：

.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
}
.Column,
.Column3
{
    display: table-cell;
    background-color: #0099ff;
}
.inner{/*put extra div inside table cell*/
   max-height: 30vh;
   overflow: auto;
}

这是因为您无法限制表格或表格单元格的高度。在表格单元格内放置一个额外的div 并限制div 的高度。

如果您不必使用table，并且不担心旧浏览器，请在flex-box上进行一些研究，您可以使用它，这要容易得多。

如果您不必使用表格，但不能使用 flex box，您可以尝试显示：内联块：

.Row
{
    width: 100%;
}
.Column,
.Column3{
    display: inline-block;
    vertical-align: top;
    background-color: #0099ff;
    width: calc(100% / 3 - 10px);
    height: 30vh;
    margin: 5px;/*for the border-spacing*/
    overflow: auto;
}

如果您不知道这一点，VH 是相对于视口高度的长度，因此 30vh 是视口高度的 30%。 Calc 会进行计算，具体取决于您需要支持的浏览器，但是您可能无法使用这些浏览器。