如何使用 css calc() 设置取决于窗口高度的高度

Question

这是我的 CSS - 查看 height 属性

header{
   position:fixed;
   height:50px
}
.block{
   height: calc(100vh - (50px));
}

我在网站上得到结果

.

.block{
   height: calc(50vh);
}

Answer 1

首先，我认为您不需要 50px 周围的括号，
没有这些，CSS 也能进行数学运算。

更重要的是：
calc 是一项相当新的技术，仍处于实验阶段。
所以不是每个浏览器都会支持它。

您可能希望使用浏览器前缀（-moz- 和 -webkit-） 继续您的实验。

另外，你应该看看这个页面：
https://developer.mozilla.org/en-US/docs/Web/CSS/calc