如何通过css calc函数实现动态尺寸-css教程-PHP中文网

如何通过css calc函数实现动态尺寸

P粉602998670

发布： 2025-09-30 20:47:02

原创

673人浏览过

calc()函数可进行动态尺寸计算，支持混合单位运算；使用时需注意运算符前后空格，可用于自适应布局、响应式高度及栅格间距控制。

如何通过css calc函数实现动态尺寸

CSS 的 calc() 函数是一个非常实用的工具，能够让我们在设置元素尺寸时进行动态计算。它支持加（+）、减（-）、乘（*）和除（/）运算，并可以混合使用不同单位，比如像素（px）、百分比（%）、视窗单位（vw/vh）等，从而实现灵活的响应式布局。

calc() 的基本写法是：calc(表达式)，其中表达式可以包含数值和单位的组合。注意：

常见场景是让一个元素占据剩余宽度。比如侧边栏固定为 200px，主内容区自动填充剩余空间：

.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.main-content {
  width: calc(100% - 200px);
}

这样无论容器多宽，主内容区都能动态调整尺寸。

希望某个元素的高度等于整个视窗高度减去头部导航的高度，可以这样写：

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

header {
  height: 60px;
}
.content-area {
  height: calc(100vh - 60px);
  overflow-y: auto;
}

这在全屏布局或后台管理系统中特别有用，确保内容区域不会被遮挡。

在没有使用 Flex 或 Grid 的情况下，可以用 calc() 手动实现等分布局。例如创建三列布局，每列之间有 20px 间隔：

.column {
  width: calc((100% - 40px) / 3);
  margin-right: 20px;
}
.column:last-child {
  margin-right: 0;
}

这里通过减去总间隙（两个 20px 间距）再均分，实现视觉上均匀的三栏。

基本上就这些。calc() 让 CSS 尺寸更智能，减少对 JavaScript 或复杂布局模型的依赖，特别适合需要精确控制又保持响应性的场景。不复杂但容易忽略细节，比如空格和单位混用规则，写的时候多留意就行。

以上就是如何通过css calc函数实现动态尺寸的详细内容，更多请关注php中文网其它相关文章！

大家都在看：