參考：
http://www.webhek.com/post/css-100-percent-height.html
https://www.cnblogs.com/kunmomo/p/10600662.html
https://www.cnblogs.com/kunmomo/p/10601289.html
https://www.cnblogs.com/trccc9/p/9830820.html 解決方法：給父元素加絕對定位，然后子元素加相對定位，這樣子元素的高度就會根據父元素的高度進行計算【可以嘗試下】
當你設置一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器窗口的高度，但大多數情況下，這樣的做法沒有任何效果。你知道為什么height:100%不起作用嗎？
按常理，當我們用CSS的height屬性定義一個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間里擴展相應的空間距離。例如，如果一個div元素的CSS是height: 100px;，那它應該在頁面的豎向空間里占滿100px的高度。
而跟W3C的規范，百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以，如果你把一個div的高度設定為height: 50%;，而它的父元素的高度是100px，那么，這個div的高度應該是50px。
那為什么 height:100%; 不起作用
當設計一個頁面時，你在里面放置了一個div元素，你希望它占滿整個窗口高度，最自然的做法，你會給這個div添加height: 100%;的css屬性。然而，如果你要是設置寬度為width: 100%;，那這個元素的寬度會立刻擴展到窗口的整個橫向寬度。高度也會這樣嗎？
錯。
為了理解為什么不會，你需要理解瀏覽器是如何計算高度和寬度的。Web瀏覽器在計算有效寬度時會考慮瀏覽器窗口的打開寬度。如果你不給寬度設定任何缺省值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗范圍(導致滾動條出現)。或者你給整個頁面設置一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面並沒有缺省的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是一個缺省值：height: auto;。當你要求瀏覽器根據這樣一個缺省值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
上面的演示例子是父元素沒有設定固定高度，於是子元素的高度height: 100% 也不會起作用。你可以根據父元素的背景色來判斷子元素的高度不是100%。
那么，如果想讓一個元素的百分比高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設定一個有效值。換句話說，你需要這樣做：
<html> <body> <div style="height: 100%;"> <p> 想讓這個div高度為 100% 。 </p> </div> </body> </html>
現在你給了這個div的高度為100%，它有兩個父元素<body>和<html>。為了讓你的div的百分比高度能起作用，你必須設定<body>和<html>的高度。
<html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 這樣這個div的高度就會100%了 </p> </div> </body> </html>
從這個演示中你可以看出，height: 100%;起作用了。
在使用height: 100%;時需要注意的一些事項
1、Margins 和 padding 會讓你的頁面出現滾動條，也許這是你不希望的。
2、如果你的元素實際高度大於你設定的百分比高度，那元素的高度會自動擴展。
父元素高度設置為min-height，子元素高度設置為100%，但實際上子元素高度你知道是多少嗎？
前言
給父元素一個min-height，子元素設置height:100%。
代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{width: 100%;min-height: 50px;background-color: yellow;}
#sp1{width: 20%;height: 100%;display: inline-block;background-color: blue;}
#sp2{width: 50%;height: 100%;display: inline-block;background-color: red;}
</style>
</head>
<body>
<div id="div1">
<span id="sp1">aaa</span>
<spanv id="sp2">bbb</span>
</div>
</body>
</html>
結果
發現子元素高度並沒有撐開，如下圖：
如果我們稍作改變，將父元素的min-height改為height，子元素高度就會撐開，如下圖：
剖析
min-height表示盒子的最小高度，並不表示盒子的最終高度，站在外部盒子的角度理解是外部最終高度是由盒子的內部元素的高度與當前盒子的最小高度共同決定。
在外部盒子等待內部元素計算出高度時並不知道自己的高度，內部盒子高度相對外部盒子設置高度時也未知外部高度，所以按照自己的內容的情況渲染了，最終的效果就是內部盒子高度與外部無關。
結論
子元素的 height 或是 min-height 百分比是否生效，基於父元素是否設置了固定高度或者是一個有效百分比高度。
參考：剖析height百分比和min-height百分比
實際編碼經驗（可以讓子元素和父元素全部都設置為相同的min-height即可）：
<template>
<div style="display: block;min-height: calc(100vh - 50px)">
<div style="float:left; width:20%; min-height: calc(100vh - 50px); background-color: wheat;">
<el-input placeholder="輸入關鍵字進行過濾" v-model="filterText"></el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
:default-expand-all="false"
:filter-node-method="filterNode"
ref="tree"
></el-tree>
</div>
<div style="float:left; width:80%; min-height: calc(100vh - 50px); background-color: gold;"></div>
</div>
</template>