前言
給父元素一個(gè)min-height篓吁，子元素設(shè)置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>
結(jié)果
image.png
剖析
min-height表示盒子的最小高度蚪拦，并不表示盒子的最終高度杖剪，站在外部盒子的角度理解是外部最終高度是由盒子的內(nèi)部元素的高度與當(dāng)前盒子的最小高度共同決定。
在外部盒子等待內(nèi)部元素計(jì)算出高度時(shí)并不知道自己的高度驰贷，內(nèi)部盒子高度相對(duì)外部盒子設(shè)置高度時(shí)也未知外部高度盛嘿，所以按照自己的內(nèi)容的情況渲染了，最終的效果就是內(nèi)部盒子高度與外部無(wú)關(guān)括袒。
換句話說(shuō)：
你父級(jí)元素 div 設(shè)置 min-height:100px;
子元素 div設(shè)置 height:100%次兆；只有當(dāng)父級(jí)元素滿足min-height:100px;條件才觸發(fā)；瀏覽器默認(rèn)是不會(huì)觸發(fā)的锹锰，所以子元素的100%的高度繼承就失效了芥炭。
結(jié)論
子元素的 height 或是 min-height 百分比是否生效狈邑，基于父元素是否設(shè)置了固定高度或者是一個(gè)有效百分比高度。
代碼預(yù)覽
解決方法
給父元素加絕對(duì)定位蚤认，子元素加相對(duì)定位
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 設(shè)置成了min-height，子元素line 是height:100%;
將高度設(shè)置成min-height,是為了文字高度不確定糕伐，解決方法：
通過(guò)js中的nextTick 用gtBoundingClientREct()獲取父元素的高度,并設(shè)置子元素的高度砰琢。達(dá)到height的高度可用
