CSS calc()函数

54 阅读 0 评论 36 点赞

我是靠谱客的博主单身蜻蜓，最近开发中收集的这篇文章主要介绍CSS calc()函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

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

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

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


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

这里写图片描述

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

以上就是单身蜻蜓为你收集整理的CSS calc()函数的全部内容，希望文章能够帮你解决CSS calc()函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

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