做项目的时候常常用遇到下面这种情况：

只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算；

		B盒子 {
	        //height: calc(100vh - 50px);
	        height: calc(100% - 50px);
扩展： vh：相对于视口的高度。视口被均分为100单位的vh
 
https://www.runoob.com/cssref/func-calc.html.
                                    因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。
                                    calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活性。给一些特殊的布局，提供了方便。
示例的显示的效果
使用cacl 布局的一个示例
想做个一个效果, 就是在 #div1 的背景，延伸到 #div2 可见区域，在 #div2 显示固定60个像素。就是黑色框宽度是60px。而不用考虑 #div1 的宽度。
css代码
#div1 {
    width: 100%;
    min-width: 400px;
                                    In CSS3 you could useheight: calc(100% - 60px);Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.* {margin:0px;padding:0px;overflow:hidden}div {position:absolute}div#header {...
                                    calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？当我在一个项目中的样式表中看到它，而且知道它的作用时，我好像发现了宝一样，的确，它的存在可以让我在架构全屏网页时不再使用脚本来控制高度了。
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“wi...
任何长度值都可以使用calc()函数进行计算；
	calc()函数支持 "+", "-", "*", "/" 运算；
	calc()函数使用标准的数学运算优先级规则；
自动调整表单域的大小以适应其容器的大小
calc() 的另外一个作用是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边