Question

我有以下代码：

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的最大高度。

有没有办法将div高度限制为30％而不是像素，这样它就可以仅使用css应用于同一行中的所有剩余div。

我确实碰巧在div中读取了相同高度的以下链接，但它与将所有div的高度设置为具有最大高度的元素有关。 The equal height link

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

Answer 1

可能是这样的：

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

Answer 2

如果你必须使用表：

.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的高度。

如果您不必使用桌面，并且不担心旧版浏览器，请对flex-box进行一些研究，您可以使用它，这样更容易。

如果您不必使用表格，但无法使用弹性框，您可以尝试显示：inline-block：

.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做计算，取决于你需要支持哪些浏览器，但是你可能无法使用它们。

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

2 个答案: