浅谈 css3 calc 函数

原创 奔跑的小前端 随笔 待整理 292阅读 2018-04-11 15:35:31 举报

在一次项目中我遇到一个很普通的问题,相信大家都会遇到过,我的需求是这样的,我的侧边栏的高度是百分百的,就像下面的例子一样:

这时我要在顶部导航栏上加一些需求,要实现的效果类似于这样,不过想很郁闷它出现了滚动条,效果如下:

我不想它出现滚动条,这个时候可能很多同学会说,我可以用绝对定位等等,但我的顶部导航栏本来就是绝对定位呀,于是乎我翻了一翻css3,发现了一个神奇的函数,calc!!!(啊尼路亚,啊尼路亚,啊尼路亚,啊尼路亚~~~)

下面是一些粗鄙的无聊的复制粘贴过来的函数说明:

calc() 函数用于动态计算长度值。

需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100vh - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;
支持版本:CSS3
兼容性:(自己网上找去吧)

回到正事,了解了它的内容,接下来就要看看它能给你带来的好处,比如:消灭滚动条,当我把父级的高度设置成height: calc(100vh - '我的需求内容高度')时滚动条神奇的消失了,呈现了这样的效果:

登登登登~!!!是不是很神奇,为什么会这样呢?因为100vh就相当于window.innerHeight, 是浏览器的内部高度, 滚动条高度也计算在内。如果高只设置100%是可用高度, 就不包含滚动条的高度啦, 是不是非常好用的一个东西(说那么多大家走过路过应施舍点点赞给我,谢谢谢谢~)

其实不仅仅只有高,还有很多很多应用场景都是可以实现的,比如我们经常会给自己的ul li设置padding或者margin,当li的个数没有超过一定的数量时它是不会换到第二行的,但有时候就因为那么一点点padding或者margin就换行了,使得左边或者右边空白了一处很难看,大家都可以用calc这个函数去解决,我就不一一举例了哈,本人技术水平有限,就说到这了,如果有错的地方,希望大家可以多多指出,祝大家级别年年跳,薪资翻又翻。

评论 ( 2 )
最新评论
奔跑的小前端 1F 2018-04-17 09:40:02 2F

嗯,如果要考虑低版本浏览器,那就不建议了

★时☆月★ 2018-04-16 19:27:02 1F

手机端还可以用一下,pc端兼容性太差了,不敢用