CSS / HTML：让2个孩子填充容器div高度的50％

Question

这看起来很简单，但我找不到任何直接的方法来实现这一点。

代码：（HTML）

            <div class="col-6-12 subcontent-outer">
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
            </div>
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
            </div>
        </div>

所以我需要每个.subcontent填充.subcontent-outer高度的50％，这在现代浏览器中有效，容器div的高度可能会发生变化。

我该怎么做？

三江源

哈利

Answer 1

你忘了关闭这些段落。关闭它们，如下：

       <div class="col-6-12 subcontent-outer">
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
                </p>
            </div>
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
                </p>
            </div>
        </div>

如果这还没有帮助，请尝试：

.subcontent-outer, .subcontent{
    float: left;
}

.subcontent{
    height: 50%;
}

修改

当然，以百分比设置子元素的高度需要父元素指定高度。

在这种情况下，您可以使用以下方法轻松测试：

.subcontent-outer{
    height: 500px; /* for example */
}

.subcontent-outer, .subcontent{
    float: left;
}

.subcontent{
    height: 50%;
}