前言
给父元素一个min-height，子元素设置height:100%。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.parent{
border:1px solid red;
min-height: 100px;
}
.parent > div{
border:1px solid green;
height:100%;
}
</style>
<body>
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
结果
image.png
剖析
min-height表示盒子的最小高度，并不表示盒子的最终高度，站在外部盒子的角度理解是外部最终高度是由盒子的内部元素的高度与当前盒子的最小高度共同决定。
在外部盒子等待内部元素计算出高度时并不知道自己的高度，内部盒子高度相对外部盒子设置高度时也未知外部高度，所以按照自己的内容的情况渲染了，最终的效果就是内部盒子高度与外部无关。
换句话说：
你父级元素 div 设置 min-height:100px;
子元素 div设置 height:100%；只有当父级元素满足min-height:100px;条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。
结论
子元素的 height 或是 min-height 百分比是否生效，基于父元素是否设置了固定高度或者是一个有效百分比高度。
代码预览
解决方法
给父元素加绝对定位，子元素加相对定位
vue中解决方法
image.png
this.$nextTick(() => {
// console.log(this.$refs.wrapper.getBoundingClientRect().height);
this.$refs.line.style.height = `${this.$refs.wrapper.getBoundingClientRect().height}px`
})
image.png
image.png
父元素toast 设置成了min-height，子元素line 是height:100%;
将高度设置成min-height,是为了文字高度不确定，解决方法：
通过js中的nextTick 用gtBoundingClientREct()获取父元素的高度,并设置子元素的高度。达到height的高度可用
网友评论