css - 使用 min-height:calc( 100vh - 64px )问题
大家讲道理
大家讲道理 2017-04-17 11:53:25
[CSS3讨论组]

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(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;
}

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号