css calc() 的使用方法，里面包含bug

57 阅读 0 评论 38 点赞

我是靠谱客的博主鲤鱼外套，最近开发中收集的这篇文章主要介绍css calc() 的使用方法，里面包含bug，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在做后台管理系统的时候吗，我们通常会发现，左侧的菜单需要出去顶部后自动布满整个屏幕，并且加上背景颜色。但是实现起来有的时候却是挺难受的。所以在这里我们就是用calc() 来使用。calc() 是css 里面的一个计算长度的公式。里面可以进行加减乘除。但是用的不好的话，会发现没有作用。如下图：
在这里插入图片描述
代码如下图：

检查后发现：calc（100% - 70px）里面的100%,是回去找父级的高度，当我们设置body的时候为相对高度，那么则会去找html的高度。所以加上
html,body{
height: 100%;
width: 100%;
}
就可以啦！记录一个小bug
在这里插入图片描述