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

Question

这是我的 css - 查看高度属性

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