子盒子最低高度80%超过自适应,父盒子永远比子盒子高

本以为很简单就能实现,但遇到些问题 百思不得解
求教大佬们有什么好方法吗
需求要求白色区域最低高度80%,超过则拉伸。

因为每个页面的背景色都不一样所以不能给app.vue页面设置背景色。

给父盒子也就是绿色背景设置100%高度会导致白色区域拉伸的话会溢出

给父盒子设置min-height又导致子盒子不能设定min-height80%
图片说明

用vw vh代替百分比试试

通过js去为里面的div计算高度