当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。
原因是
百分比
的大小是相对其父级元素宽高的大小，如最外层元素设置的
百分比
是对应屏幕而言的。
需要了解的是对于
宽度
来说，其父级元素无须确定
宽度
就能设置
百分比
，例如我们可以利用这个特性给未知
宽度
的块级元素设置水平居中效果：
父元素
css
： position: relative/absolute; left: 50%;
子元素
css
： position: relative; left: -50%;
但高度则不同，若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式，我们可以这样解
/*实现了
宽度
为父容器
宽度
减去
固定的
100
像素
*/
width:-webkit-
ca
lc
(
100
% -
100
px);
width:-moz-
ca
lc
(
100
% -
100
px);
width:
ca
lc
(
100
% -
100
px);
1.
ca
lc
() 里面的公式可以加减乘除，而且支持rem,em算法
2.减号的两边必须都有至少一个空格
1. 运算符前后都需要保留一个空格，例如：width:
ca
lc
(
100
% - 10px)；
2. 任何长度值都可以使用
ca
lc
()函数进行计算；
3.
ca
lc
()函数使用标准的数学运算优先级规则；
4. 它支持 “+”, “-”, “”, “/” 运算*
height:
ca
lc
(
100
% - 114px);
做项目的时候常常用遇到下面这种情况：
要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子 高为
100
% 或者是
100
vh
减去
上面的 A盒子的高度50px。
只需设置样式使用
ca
lc
() 函数，它支持 “+”, “-”, “*”, “/” 运算；
运算符前后都需要保留一个空格，例如：width:
ca
lc
(
100
% - 10px)；
任何长度值都可以使用
ca
lc
...
