css页面布局之百分比布局

前言：

有的时候我们需要页面刚好装满整个屏幕，不多不少，里面如果有子容器，希望能刚好装满父容器，不多不少。

我们可以用百分比布局来实现这种效果。

应用场景：

• 富图表的大屏幕展示页面
• 丰富交互体验的单页面程序
• 喜欢抠页面细节的项目

实现过程

1. html,body元素高度设置为100%；容器元素（#app）,高度设置为100%；
2. 将容器继续细分为几个子盒子（subbox）,高度宽度分别设置为百分比形式，浮动布局。
3. 在子容器里分别添加一个包裹盒子（可以用来设置背景图，盒模型设置为border-box,内边距等，高度百分比）
4. 这样我们的每个元素的高度都依赖于父元素的高度。这样就能实现刚好装满屏幕的效果，测试完美
5.