vh:相对于视窗的高度，那么vw:则是相对于视窗的高度。

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

详细vh的用法，大家可以参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

calc是英文单词calculate(计算)的缩写，是CSS3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

width:100vh与min-height:calc(100vh + 51px)的更多相关文章

  1. height:calc(100% - 40px)

    在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的: .container{ height: calc ...

  2. 在 Less 中使用 calc() 的坑：height: calc(~"50% - 21px");

    注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CY ...

  3. 微信小程序 - height: calc(xx - xx)；无效

    遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在父级vie ...

  4. scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

    题中的那么多属性让人头都大了,他们到底是什么意思?不同浏览器的实现是一样的吗?以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2,操作系统ub ...

  5. 【共享单车】—— React后台管理系统开发手记：主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  6. 适用于hips ui的iPhoneX及以上适配方案

    版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...

  7. css中的数学表达式calc()

    前言 数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路. 概念 数学表达式calc()是calculate计算的缩写,它允许使用+.-.*. ...

  8. CSS 使用calc()获取当前可视屏幕高度

    来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个 ...

  9. CSS3 使用 calc() 计算高度 vh px

    Viewport    viewport:可视窗口,也就是浏览器.    vw Viewport宽度, 1vw 等于viewport宽度的1%    vh Viewport高度, 1vh 等于view ...

随机推荐

  1. STM32Cube自学-1

    为了方便调试,使用Keil5+Proteus.1.新建Proteus STM32项目,选择STMF103C6 2.新建STM32CubeMX项目,选择同型号CPU,选择UART1,Asynchrono ...

  2. MySQL事物(一)事务隔离级别和事物并发冲突

    数据库的操作通常为写和读,就是所说的CRUD:增加(Create).读取(Read).更新(Update)和删除(Delete).事务就是一件完整要做的事情.事务是恢复和并发控制的基本单位.事务必须始 ...

  3. C++常量 运算符

    \n  换行   光标移到下一行             \0  空值                               \t   水平制表符 \r   回车  光标回到本行开头      ...

  4. luogu P4036 [JSOI2008]火星人

    传送门 很久以前xzz大佬就喊我做这题,结果现在才做qwq 因为要在序列中插入,所以直接用\(Splay\)维护这个串的哈希值,插入就直接把那个点插♂进去,修改就把点旋到根,然后修改和pushup,询 ...

  5. deepin下codeblocks更改调试终端

    codeblocks建立控制台程序生成完毕后,发现自带的调试终端xterm不能进行复制粘贴操作参考了Ubuntu的更换调试终端的方法,就是把deepin下的deepin-terminal 用作调试终端 ...

  6. cdh部署

    supermicro安装环境 本次安装基于无因特网的环境,共安装2个节点(一个master节点,一个data及节点),所用系统为centos7.x,所有安装过程均使用root用户.具体的节点信息如下: ...

  7. OpenCV：Debug和Release模式 && 静态和动态编译

    1.Release和Debug的区别 Release版称为发行版,Debug版称为调试版. Debug中可以单步执行.跟踪等功能,但生成的可执行文件比较大,代码运行速度较慢.Release版运行速度较 ...

  8. Mac环境变量配置错了以后初始化的方法

    转自:https://blog.csdn.net/or_7r_ccl/article/details/50886223 配置过安卓开发环境,改过bash_profile这个文件,最后不知怎么的只有cd ...

  9. eclipse自动生成变量名声明(按方法返回值为本地变量赋值）

    eclipse自动生成变量名声明(按方法返回值为本地变量赋值) ctrl+2+L 这个快捷键可自动补全代码,极大提升编码效率! 注:ctrl和2同时按完以后释放,再快速按L.不能同时按! 比如写这句代 ...

  10. Docker+STF在ubuntu下测试环境搭建（详细搭建步骤及踩坑记录）

    一.什么是OpenSTF? STF又称OpenSTF,它是一个手机设备管理平台,可以对手机进行远程管理.调试.远程手机桌面监控等操作.这个系统类似于目前很流行的云测服务比如Testin,虽然网页上提供 ...