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. VSCode 拓展插件推荐

    想让VS code干活快起来,插件少不了,开始吧: 快捷键:Ctrl+Shift+X打开插件搜索安装即可 (安装的插件通常会保存在这个目录:C:\Users\你的系统登录用户如administrato ...

  2. 在html中控制自动换行

      其实只要在表格控制中添加一句<td style="word-break:break-all">就搞定了.其中可能对英文换行可能会分开一个单词问题:解决如下:语法: ...

  3. u-boot移植（五）---代码修改---时钟修改、SDRAM

    最开始已经建立了新单板以及配置文件,现在就需要做的是代码的修改,配置成适合目标板使用的u-boot. 一.时钟修改 在代码流程分析中,我们知道,系统的启动是: 设置 CPU 为管理员模式 关闭看门狗 ...

  4. Linux 4.10.8 根文件系统制作（三）---制作yaffs文件系统

    这里直接用的是韦东山提供的工具. yaffs文件系统是专门用于nandflash的文件系统 我们前面已经下载了yaffs 的源码,也做了文件系统目录的构建. 在yaffs2的源码目录中有一个utils ...

  5. Python 升级致yum 问题，pip 异常

    升级 Python 导致 yum 和 pip 异常: 一些storm 和 自定义项目 需要升级python版本:Linux 系统默认是2.6 版本 ,所以需要根据业务进行升级操作:Python 官方下 ...

  6. Eclipse通用设置

    分类 Eclipse分为64位.32位,安装版.免安装版 查看Eclipse版本信息 Help - About Eclipse - Installation Details

  7. PHP - CentOS下开发运行环境搭建（Apache+PHP+MySQL+FTP）

    本文介绍如何在 Linux下搭建一个 PHP 环境.其中 Linux 系统使用是 CentOS 7.3,部署在阿里云服务器上.   1,连接登录服务器 拿到服务器的 ip.初始密码以后.我们先通过远程 ...

  8. 2017/05/04 java 基础 随笔

    1.java变量在使用之前必须初始化 int  a; a=10 ; int b; 没有初始化,也没有使用也不报错 2.强制类型转换  int a=8: byte b=6; b=(byte)(a+b); ...

  9. 【Python学习笔记】调整matplotlib的图例legend的位置

    有时默认的图例位置不符合我们的需要,那么我们可以使用下面的代码对legend位置进行调整. plt.legend(loc='String or Number', bbox_to_anchor=(num ...

  10. vuejs初学入门环境搭建

    一.Nodejs:    1.安装下载:http://nodejs.cn/download/    2.Node.js安装配置: http://www.runoob.com/nodejs/nodejs ...