calc()函数 css中用100%的宽度/高度，减去50px？？

做项目的时候常常用遇到下面这种情况：
要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子高为 100% 或者是100vh减去上面的 A盒子的高度50px。

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

运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
它支持 “+”, “-”, “*”, “/” 运算

B盒子 {
   //height: calc(100vh - 50px);
   height: calc(100% - 50px);
   }
1234
扩展： vh：相对于视口的高度。视口被均分为100单位的vh
————————————————
版权声明：本文为CSDN博主「最初都是小白」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Originally_M/article/details/100105309

calc()函数 css中用100%的宽度/高度，减去50px？？相关推荐

css按钮居中_你不一定知道的CSS最小和最大(宽度/高度)知识点及优缺点
通常,我们希望限制元素相对于其父元素的宽度,同时使其具有动态性.因此,有一个基础宽度或高度的能力,使其扩展的基础上,可用的空间.比如说,我们有一个按钮,它的宽度应该是最小的,不应该低于它的宽度.这就是 ...
css3 高度最小100%,100％最小高度CSS布局
我正在使用以下代码:CSS布局-100%的高度最小身高此页面的#container元素的最小高度为100%.这样,如果内容所需的高度大于视口提供的高度,则#content的高度也会强制#conta ...
CSS，让100%的宽度，自动减10，让100%的高度，自动减10，可以加减乘除
CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除实例: .add{width: calc(100% - 10px);height: calc(100% - 10px) ...
CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) : 相对长度单位相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. 单位描述 em 它是描述相对于应用 ...
css calc()函数动态根据屏幕宽度计算宽度
今天写移动端H5页面,mui按钮在layer mobile 弹窗 html类型的时候,mui按钮宽度设置为100%的时候,mui按钮宽度会超出屏幕,听同事建议,使用 css calc()函数计算得以解 ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
CSS3 calc() 函数，height: calc(100% - 70px)；
今天做练习的时候遇到了这样一行代码:height: calc(100% - 70px);,100%的高度减去70px???这是什么函数?竟然支持不同单位之间的运算?! 通过查阅资料,我终于认识了这个函 ...
CSS calc()函数与单位vh 常见height：100vh
calc() 函数属于CSS3版本内容,用于动态计算长度值.例如:width: calc(100% - 10px):需要注意的是,运算符前后都需要保留一个空格.calc()函数支持 "+&q ...
css 中动态获取宽度,css中的calc动态计算长度值
1 场景 css的样式中,存在动态计算长度的需求. 2 方案使用css中的calc函数动态计算css中的长度值. 语法: calc(expression) 参数说明: 值描述 expression ...

calc()函数 css中用100%的宽度/高度，减去50px？？

calc()函数 css中用100%的宽度/高度，减去50px？？相关推荐

最新文章

热门文章