html - 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填充 50% 的高度.subcontent-outer，这在现代浏览器中有效，容器 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%;
}