CSS calc()函数

151 阅读 0 评论 100 点赞

我是靠谱客的博主单身蜻蜓，这篇文章主要介绍CSS calc()函数，现在分享给大家，希望可以做个参考。

面对下图这种需求应该如何改呢？
这里写图片描述

一般我们可以给父盒子flex-direction: column;
然后给子盒子1给一个固定的高度，子盒子2给flex：1；
这样就可以达到想要的效果。但这个必须知道高度。不然无济于事。

这里有一种比较靠谱，就是用calc函数。


//父盒子
div {
height: calc(100vh - 165px);
overflow: auto;
}

这里写图片描述

就可以做出这样的效果了，是不是很神奇呢。
参考文章

以上就是单身蜻蜓最近收集整理的关于CSS calc()函数的全部内容，更多相关CSS内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。