区块高度计算不符合预期：calc("100vh - 90px")失效问题

你的问题出在calc()的语法错误上：你使用的calc(~"100vh - 90px")是Less/Sass预处理器的转义写法，若在原生CSS环境中运行，浏览器无法识别这个表达式，导致.section1的高度设置失效。

修正方案一：原生CSS标准写法 #

直接移除Less的转义符~""，使用原生CSS的calc()语法即可：

html,
body {
  margin: 0;
  padding: 0;
}

.nav-menu {
  background-color: purple;
  height: 90px;
}

.section1 {
  height: calc(100vh - 90px);
  background-color: red;
}

HTML代码无需修改：

<nav class="nav-menu"></nav>
<div class="section1"></div>

修正方案二：Flex布局实现（更灵活） #

如果不想使用calc()，可以通过Flex布局让.section1自动填充剩余视口空间：

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-menu {
  background-color: purple;
  height: 90px;
}

.section1 {
  flex: 1;
  background-color: red;
}

内容的提问来源于stack exchange，提问作者skate