Question

我有2列。第一列更高。第二列有3个字段集。我想通过设置子高度百分比来填充第二列，但它不起作用。第二列高度必须等于第一列高度。怎么做？

更新

我尝试设置父高度，但第三个字段集超出了secondColumn。

Answer 1

以下是使用CSS表格单元格解决此问题的一种方法。

对于HTML，请在短（最右）列中添加包装div：

<div id="container">
    <div id="firstColumn">
        CONTENT<br>
        CONTENT<br>
        CONTENT<br>
        CONTENT<br>
        ...
        CONTENT<br>
    </div>
    <div id="secondColumn">
        <div class="wrapper">
        <fieldset id="first">
            <legend>TEST1</legend>
            Content
        </fieldset>
        <fieldset id="second">
            <legend>TEST2</legend>
            Content
        </fieldset>
        <fieldset id="third">
            <legend>TEST3</legend>
            Content
        </fieldset>
        </div>
    </div>
</div>

对于CSS，请尝试以下操作：

#container {
    display: table;
    height: 100%;
}

#firstColumn {
    display: table-cell;
    height: 100%;
    background-color: yellow;
}

#secondColumn {
    display: table-cell;
    height: 100%;
    background-color: gray;
}
.wrapper {
    height: 100%;
    outline: 2px dotted blue;
}
legend {
    border: 1px dashed blue;
}
#first {
    height: 15%;
}

#second {
    height: 25%;
}

#third {
    height: 45%;
}

将display: table应用于父#container，将display: table-cell应用于子元素#firstColumn和#secondColumn。为表格和表格单元格设置高度为100％。

对于.wrapper，将高度设置为100％，以便填充高度列，然后调整fieldset元素的高度。

请注意，您需要为图例允许一些垂直空间（我假设为5％） 15％+ 25％+ 45％+ 3x5％= 100％，这应该接近你所需要的。

请参阅演示：http://jsfiddle.net/audetwebdesign/qs25d/

注意：您可能需要为父（表）容器设置最小高度以确保三个字段集有足够的空间，否则你可能得不到垂直您对字段集的预期高度比例。

通过设置子高度百分比来填充父级

1 个答案: