如何在顺风 CSS 中使用 calc()？

Question

我有这个 html：

  <div class="container h-screen w-screen">
    <div class="navBar h-7"></div>
    <div class="content-container"></div>
  </div>

我已将 .navBar 的高度设置为 h-7。现在我想将 .content-container 的高度设置为 100vh-(h-7)。

我如何使用 calc() 来设置它？

Answer 1

不要在计算中添加空格：

class="w-[calc(100%+2rem)]"

输出：

.w-\[calc\(100\%\+2rem\)\] {
  width: calc(100% + 2rem);
}

或者您可以使用下划线_代替空格：

_{参考：处理空白}

class="w-[calc(100%+2rem)]"

我们也可以使用主题变量：

h-[calc(100%-theme(space.24))]

Answer 2

主题（）

使用该theme()函数通过点表示法访问您的 Tailwind 配置值。

@apply当您只想为声明的一部分引用主题配置中的值时，这可能是一个有用的替代方法：

.content-container {
  height: calc(100vh - theme('spacing.7'));
}