父级设min-height时，如何将子级高度设为父级最小高度的百分比？

父级元素已设置min-height: 100vh，需要将子级元素的min-height（或height）设置为父级min-height的百分比，但尝试的方法均未成功：

HTML代码 #

<div class="parent-one">
   <div class="child-one">
      <p>Some Text...</p>
   </div>
</div>

CSS代码 #

.parent-one {
    min-height: 100vh;
    width: 100%
}
    
.child-one {
    /* min-height: inherit // 这个生效，子级高度为100vh */
    /* min-height: 30% // 这个不生效 */
    /* height: 30% // 这个不生效 */
}

请问该如何设置子级的min-height？若要设置子级的height又该怎么做？

一、设置子级min-height为父级min-height的百分比 #

百分比高度的计算需要依赖父级的明确高度值，而min-height只是父级的最小高度约束，并非固定高度，所以直接用百分比会失效。可以用以下两种方法解决：

1. 给父级同时设置height: 100vh和min-height: 100vh
   这样父级既有固定高度基准，又保留了最小高度的特性，子级的百分比高度就能基于这个基准计算：

   .parent-one {
       min-height: 100vh;
       height: 100vh; /* 添加这一行 */
       width: 100%;
   }
   
   .child-one {
       min-height: 30%; /* 此时生效，为父级高度的30% */
   }
   

2. 使用CSS变量（var()）+calc()计算
   把父级的min-height值定义为变量，子级直接引用变量并计算百分比，这种方法更灵活，不需要固定父级高度：

   .parent-one {
       --parent-min-height: 100vh;
       min-height: var(--parent-min-height);
       width: 100%;
   }
   
   .child-one {
       min-height: calc(var(--parent-min-height) * 0.3); /* 直接计算30%的高度 */
   }
   

二、设置子级height为父级min-height的百分比 #

问题根源和min-height一致，都是父级缺少固定高度基准，解决方法如下：

1. 父级添加固定高度height: 100vh

   .parent-one {
       min-height: 100vh;
       height: 100vh;
       width: 100%;
   }
   
   .child-one {
       height: 30%; /* 此时生效 */
   }
   

2. 使用CSS变量+calc()计算

   .parent-one {
       --parent-min-height: 100vh;
       min-height: var(--parent-min-height);
       width: 100%;
   }
   
   .child-one {
       height: calc(var(--parent-min-height) * 0.3);
   }
   

注意事项 #

• 如果父级内容实际高度超过100vh，第一种方法（给父级加height）会让父级被内容撑开，但子级的百分比高度仍基于100vh计算；
• 第二种CSS变量方法，子级高度会固定为30vh，不受父级实际高度变化影响，可根据需求选择。

内容的提问来源于stack exchange，提问作者falah mahmood