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

Question

我现在想实现一个p的高度为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;
}

其實還有很多別的辦法，不過各有各的缺陷，這個也有缺陷，就是不知道適不適合你。

好吧！我想說的是，你最好把你的結構和想要實現的效果都表達出來，否則我只能揣測著回答你，蠻浪費時間。