css计算高度calc

作者：菠蘿。d海发布日期:2025-09-07 浏览:47

/* 使用 calc() 计算高度的示例 */

.container {
  /* 高度为视窗高度减去 100px */
  height: calc(100vh - 100px);
}

.box {
  /* 高度为父元素高度的 80% 减去 20px */
  height: calc(80% - 20px);
}

.text-box {
  /* 高度为 300px 加上 50% 的字体大小 */
  height: calc(300px + 0.5em);
}

解释说明：

calc() 是 CSS 中的一个函数，用于执行数学计算以确定 CSS 属性值。
在上面的示例中：
- .container 的高度是视窗高度 (100vh) 减去 100px，这样可以确保内容不会超出屏幕底部。
- .box 的高度是其父元素高度的 80% 减去 20px，适用于需要根据父元素动态调整高度的场景。
- .text-box 的高度是固定高度 300px 加上 0.5em 的字体大小，适用于需要结合固定和相对单位的情况。

上一篇：css3 三角形

下一篇：css 偶数行变色