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

Question

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

Answer 1

Tell me about my approach. Although I don’t know your structure, I am 80% sure that your structure is as follows

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

The height of nav + main is at least 100vh, and nav is fixed at 64px, right?

This structure must have an external container, right? For the time being, I think this external container is the body,

One way is

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

nav {
    height: 64px;
}

main {
    flex: 1 1 0;
}

In fact, there are many other methods, but each has its own shortcomings. This one also has shortcomings, but I don’t know if it is suitable for you.

Okay! What I want to say is that you'd better express your structure and the effect you want to achieve, otherwise I can only guess at answering you, which is a waste of time.