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

要让 B盒子 占满 A盒子 剩下的部分也就是黄框区域,这时候我们可以设置 B盒子 高为 100% 或者是 100vh 减去上面的 A盒子 的高度50px。
在这里插入图片描述

只需设置样式使用calc() 函数,它支持 “+”, “-”, “*”, “/” 运算;
  1. 运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
  2. 任何长度值都可以使用calc()函数进行计算;
  3. calc()函数使用标准的数学运算优先级规则;
  4. 它支持 “+”, “-”, “*”, “/” 运算
		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则是像素单位,表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSScalc()函数计算高度值,公式为100vh - 100px。 calccss 是一个函数,用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 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() 的另外一个作用是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边