css頁面布局之百分比布局

前言：
有的時候我們需要頁面剛好裝滿整個屏幕，不多不少，裏面如果有子容器，希望能剛好裝滿父容器，不多不少。
我們可以用百分比布局來實現這種效果。
應用場景：

• 富圖表的大屏幕展示頁面
• 豐富交互體驗的單頁面程序
• 喜歡摳頁面細節的項目

實現過程

html,body元素高度設置為100%；容器元素（#app）,高度設置為100%；

將容器繼續細分為幾個子盒子（subbox）,高度寬度分別設置為百分比形式，浮動布局。

在子容器裏分別添加一個包裹盒子（可以用來設置背景圖，盒模型設置為border-box,內邊距等，高度百分比）

這樣我們的每個元素的高度都依賴於父元素的高度。這樣就能實現剛好裝滿屏幕的效果，測試完美