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

转载于:https://www.cnblogs.com/ysx215/p/7002989.html

width:100vh与min-height:calc(100vh + 51px)相关推荐

解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 260px) 的效果
注:也可直接将el-table的height属性绑定为字符串:calc(100vh - 260px) 实现为同样的效果, 260 是顶部和底部导航以及部分自定义布局 :例: <template& ...
css3中的width:100vh以及calc(100vh - 10px)，calc() 用法案例
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;**vmax**: 相对于视窗的宽度或高度中较大的那个.其中最大的那个 ...
height:calc(100% - 10px)的用法(垂直居中) - 布局篇
下图demo所示,如何让sidebar左侧边栏导航在垂直方向全尺寸拉伸? 如何让一个侧边栏垂直方向全尺寸拉伸? 代码如下: height:calc(100% - 10px) 以上就是关于" ...
CSS3 calc() 函数，height: calc(100% - 70px)；
今天做练习的时候遇到了这样一行代码:height: calc(100% - 70px);,100%的高度减去70px???这是什么函数?竟然支持不同单位之间的运算?! 通过查阅资料,我终于认识了这个函 ...
CSS calc()函数与单位vh 常见height：100vh
calc() 函数属于CSS3版本内容,用于动态计算长度值.例如:width: calc(100% - 10px):需要注意的是,运算符前后都需要保留一个空格.calc()函数支持 "+&q ...
Python 路径问题：cv2.error: OpenCV(4.1.0)...size.width＞0 size.height＞0 in function ‘cv::imshow‘. 解决方法
cv2.error: OpenCV(4.1.0) C:\projects\opencv-python\opencv\modules\highgui\src\wi ndow.cpp:352: error ...
html 设置min height,CSS中min-height使用技巧
DIV+CSS中最小高度设定min-height设定最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozi ...
html 设置min height,HTML min-height用法总结
min-height 属性设置元素的最低高度,该属性值会对元素的高度设置一个最低限制.因此,元素可以比指定值高,但不能比其矮.不允许指定负值. 下面我们就对min-height的用法进行汇总: 为什么 ...
css l数字相加,CSS calc()的完整指南
CSS具有calc()执行基本数学运算的特殊功能. .main-content { /* 从100vh减去80px */ height: calc(100vh - 80px); } 在本指南中,我将介 ...

width:100vh与min-height:calc(100vh + 51px)

width:100vh与min-height:calc(100vh + 51px)相关推荐

最新文章

热门文章