做为一个前端开发者，总有一天我们要设置页面某一部分内容自适应浏览器窗口大小，下面分享下使用vw和vh的设置方式，

一波解释：

v（即viewport）：可视窗口，也就是浏览器窗口大小.
vw Viewport宽度， 1vw 等于viewport宽度的1%
vh Viewport高度， 1vh 等于viewport高的的1%

calc() 函数用于动态计算长度值。

用法：

height: calc(100vh - 100px);

设置元素的 高度为当前窗口高度 减去100px

width：calc(100vw - 100px);

设置元素的 宽度为当前窗口宽度 减去100px

END

CSS vw与vh动态设置元素的高度宽度的更多相关文章

  1. 实现ScrollView中包含ListView，动态设置ListView的高度

    ScrollView 中包含 ListView 的问题 : ScrollView和ListView会冲突,会导致ListView显示不全 <?xml version="1.0" ...

  2. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

  3. 【前端_js】jQuery动态设置元素的样式

    1.用css()方法查询元素的某个样式 $("div").css("padding-left")); 2.用css()方法设置元素的样式 法一: $(" ...

  4. css3动态计算元素的高度及宽度

    1.px     像素,我们在网页布局中一般都是用px. 2.百分比     百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了 3.Viewport 当已知一个div的高度 ...

  5. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  6. 微信小程序——动态设置swiper的高度

    根据小程序的设定,swiper组件默认高度为150px,无法根据内容来撑高.如果里面的内容固定还好说,直接设置一个高度就可以了.要是里面内容是动态变化的,这个特性使得我们使用这个组件的时候感到诸多不便 ...

  7. 在列表中动态设置元素的id

    <div class="col-6" v-for="(item,i) in showpics" :key="i"> <im ...

  8. DIV+CSS常见问题：DIV如何设置一个像素高度？

    CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...

  9. Android 动态设置控件高度

    TextView textView= (TextView)findViewById(R.id.textview); LinearLayout.LayoutParams linearParams =(L ...

  10. swift 动态设置UILabel的高度

    import UIKit class ViewController3: UIViewController {          override func viewDidLoad() {        ...

随机推荐

  1. xshell拖拽文件

    直接在linux中输入命令 yum install lrzsz 安装完毕后即可拖拽文件.

  2. windos下激活python虚拟环境

    1.从终端中找到解释器的目录 2.cd到Scripts,输入激活命令activate  这样就表示激活成功了

  3. windows sshd powershell 配置

    安装sshd打开"设置",选择"应用">"应用和功能",然后选择"可选功能" .扫描列表,查看是否已安装 Open ...

  4. WinForm嵌入Web网站

    1.安装CefSharp 2.GetMac()获取用户mac地址方法 3.根据错误提示新建CEFKeyBoardHander.cs form1.cs using CefSharp; using Cef ...

  5. curl:(6) Could not resolve host: baidu.com; Unknown error

    问题描述 有段时间没操作CentOS了,然后启动Virtualbox中的CentOS之后,发现网络不通,ping baidu.com 出现错误 curl:(6) Could not resolve h ...

  6. 淘淘商城项目技术点-8：vsftpd

    FTP(文件传输协议)全称是:Very Secure FTP Server.   Vsftpd是linux类操作系统上运行的ftp服务器软件. vsftp提供三种登陆方式:1.匿名登录  2.本地用户 ...

  7. C# Linq不同类型数组之间的转换

    string[] strArray = "a,b,c,d,e,f,g".Split(new char[]{ ',' }); int[] intArray; //C# 3.0下用此句 ...

  8. SATA硬盘的数据和电源接口定义（转）

    现在 SATA设备越来越普及,包括STAT硬盘和光驱基本都已经是 SATA接口的了,以前的老式电源输出接口一般都是20针供主板加上4针的电源供硬盘也就是说以前的电脑电源给硬盘供电没有设计15针 SAT ...

  9. 关于 verilator 中 config.vlt 等配置文件的使用

    参考网页:https://verilator.org/guide/latest/exe_verilator.html#configuration-files 注意,在使用 config.vlt 配置文 ...

  10. imputation-综述文章：关于网络推理的scRNA序列插补工具基准突出了高稀疏性水平下的性能缺陷

    文章题目: Benchmarking scRNA-seq imputation tools with respect to network inference highlights 中文题目: 关于网 ...