CSS 设置孙节点高度等于父节点

HTML

节点结构如下：需设置abc高度与最外层div一直。

示例代码最外层高度只是假设，真实场景往往都是height: 100%。

<div style="height: 300px">
    <div>
        <div>abc</div>
    </div>
</div>

方法

最简单

设置子节点与孙节点都为height: 100%。

<div style="height: 300px">
    <div style="height: 100%">
        <div style="height: 100%">abc</div>
    </div>
</div>

花式解法

原因：很多封装的组件，在渲染后往往都被套了几层div，加了样式往往不起作用（子节点无法添加样式），一看控制台就发现多了很多外壳。

案例：Ant Design Pro中的DrawerForm里的body会被套一个<form>标签。body高度想设置100%只能覆盖全局样式。

解决：使用绝对定位，将孙节点定位到父节点上。

<div style="height: 300px;position: relative">
    <div>
        <div style="position: absolute;top: 0; bottom: 0;left: 0;right: 0">abc</div>
    </div>
</div>