html - CSS/HTML : Make 2 children fill 50% of height of container div

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%;
}