首页 > 开发 > CSS > 正文

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

2017-09-12 09:35:32  来源: 网友分享

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

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

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