使用 min-height:calc( 100vh - 64px )问题

Question

我现在想实现一个div的高度为100vh再减去导航栏的64px,使用min-height:calc( 100vh - 64px )为什么在浏览器上得出36vh的结果，并不是我想要的结果，请问一下要怎么设置才能得到想要的结果

Answer 1

说说我的做法吧，虽然不知道你的结构，不过我能80%的肯定你的结构如下

<nav>导航</nav>
<main>主内容</main>

nav + main的高度最少为100vh，nav固定为64px对吧？

这个结构总得有个外部容器吧？我先暂且认为这个外部容器是body,

一种办法就是

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

nav {
    height: 64px;
}

main {
    flex: 1 1 0;
}

其实还有很多别的办法，不过各有各的缺陷，这个也有缺陷，就是不知道适不适合你。

好吧！我想说的是，你最好把你的结构和想要实现的效果都表达出来，否则我只能揣测着回答你，蛮浪费时间。

Answer 2

如果用了CSS预处理器（less,scss）会被它们先解析，这是需要禁用解析 calc(~ '100vh - 64px') (less的写法）