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()计算得到元素的宽度。

时间： 2024-10-09 19:38:27

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

height:calc(100% - 40px)

在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的: .container{ height: calc(100% - 40px); //注:减号前后要有空格,否则很可能不生效!! }

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

注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CYVDPb44tvFpa_O8sjWXcQ 原文地址:https://www.cnblogs.com/cag2050/p/10898353.html

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,操作系统ubuntu16.04的测试,关于IE及其它浏览器并没有考虑. 一.谈谈XXWidth 1.width 这个是style对象的一个属性,跟你在css样式里写的那个width的值是一样的,注意他是带单位的. <!DOCTYPE html> <html lang="en">

ueditor单图片（simpleupload）上传，设置其 width：100%，height：auto。以适应各种屏幕大小显示

打开ueditor.all.js,按下图操作(修改后注意清缓存): 附上待搜索的关键字:function callback() 附上代码 loader.setAttribute('width','100%');//图片宽度100% loader.setAttribute('height','auto');//图片高度auto 原文地址:https://www.cnblogs.com/isenhart/p/9908471.html

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

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.页面结构定义 左侧导航栏,右侧页面结构 右侧显示内容分别分为上Header.中Content和下Footer部分 二.目录结构定义 src->admin.js:项目主结构代码(index.js中替换App.js挂载到根节点) src->common.js:项目公共结构代码(类似admin.j

经典后台管理界面布局

优点:品字形布局,顶部和左侧导航固定,右侧内容随浏览器大小自动调整. 缺点:对低版本浏览器兼容性差,以及其他一些小问题. <!DOCTYPE html> <html> <head> <title>Admin page</title> <style type="text/css"> * { padding: 0; margin: 0; box-sizing: border-box; } menu{ height: 1

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

版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. 无适配情况 自从iPhone X出了刘海屏后,对于我们前端是适配难度又更上一层楼.不知道你有没有遇到过如下情况 1.头尾嵌入边框 2.在适配了头尾之后,scroll框子没做适配,出现最后的内容别下方小黑条遮住的情况 3.适配了iPhoneX,却没有适配iPhoneXs Max 如果,你遇到过以上几

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

来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位.一般浏览器字体大小默认为16px,则2em == 32px:ex 依赖于英文字母小 x 的高度ch 数字 0 的宽度rem 根元素(html)的 font-sizevw

css保留字符串里面换行空格展示以及使用calc计算节点高度

渲染保留字符串样式使用css: white-space: pre-wrap; viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% 例如 :设置div元素的高度为当前窗口高度-100px div{ height: calc(100vh - 100px); width: calc(100vw - 100px); } 原文地址:https://www.cnblogs.co