width:100vh与min-height:calc(100vh + 51px)
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)的更多相关文章
- height:calc(100% - 40px)
在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的: .container{ height: calc ...
- 在 Less 中使用 calc() 的坑:height: calc(~"50% - 21px");
注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CY ...
- 微信小程序 - height: calc(xx - xx);无效
遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在父级vie ...
- 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 ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 适用于hips ui的iPhoneX及以上适配方案
版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...
- css中的数学表达式calc()
前言 数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路. 概念 数学表达式calc()是calculate计算的缩写,它允许使用+.-.*. ...
- CSS 使用calc()获取当前可视屏幕高度
来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个 ...
- CSS3 使用 calc() 计算高度 vh px
Viewport viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于view ...
随机推荐
- SQL Server分页进化
DataReader.Dataset 数据量太大就用datareader,dataset都读到内存里了,datareader是直接读取数据库. DataReader是一个快速的只进游标 DataRea ...
- CRLF攻击的一篇科普:新浪某站CRLF Injection导致的安全问题(转)
转:https://www.leavesongs.com/PENETRATION/Sina-CRLF-Injection.html 新浪某站CRLF Injection导致的安全问题 PHITHON ...
- asp.net mvc4 Json问题
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 卷积神经网络(CNN)学习笔记1:基础入门
卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01 | In Machine Learning | 9 Comments | 14935 Vie ...
- 什么是 maven的uber-jar
在maven的一些文档中我们会发现 "uber-jar"这个术语,许多人看到后感到困惑.其实在很多编程语言中会把super叫做uber (因为suber可能是关键字), 这是上世纪 ...
- windows Tomcat apr安装
背景 这都是当时不了解这个东西,又怕忘了记下来的,其实试验后.也就那么回事. 转载 Tomcat Native 这个项目可以让 Tomcat 使用 Apache 的 apr 包来处理包括文件和网络IO ...
- git 使用https 和SSH 提交远程库小总结
一.使用https提交远程库 首先已经git commit -m “注释” 本地仓库关联远程github服务器:git remote add origin “https://XXXX.git” 提交 ...
- freerradius 错误:pap: WARNING: No "known good" password found for the user
具体错误如下: 1) # Executing section authorize from file /usr/local/etc/raddb/sites-enabled/default(1) a ...
- Vue+ajax的使用小结
js var vue = new Vue({ el:"#vueid", data:{ selectById : "", }, methods:{ yourMet ...
- winform(记事本--查找)