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

问题描述

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

问题解答

说说我的做法吧，虽然不知道你的结构，不过我能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;}

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

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