做为一个前端开发者，总有一天我们要设置页面某一部分内容自适应浏览器窗口大小，下面分享下使用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. OSPF的安全认证

    OSPF的安全认证 OSPF通过LSA报文同步状态信息,协议根据LSA提供的状态信息,快速实行全网路由的建立.也就是一通百通,一变则变.坏处就是有人搞破坏,一坏则百坏.为防止网络破坏活动,实行认证(明 ...

  2. OSPF配置知识总结2（单区域）

    OSPF配置知识总结2 静态路由有静态路由的好处,但也有弊端,牵一发动全身,在一个路由路径上,只要变一个,其他所有的路由器上的静态路由都要跟着改变. 用动态路由OSPF很简单就能解决这个问题.如下: ...

  3. 使用Github或Gitlab的Webhooks实现代码自动更新部署(Ubuntu20.04)

    1.安装ssh服务root@Ubuntu:~# apt-get install openssh-server 2.部署phproot@Ubuntu:~# add-apt-repository ppa: ...

  4. mybatis-关联查询4-多对多查询

    三张表的关联查询  

  5. xd p4 WEB源码拓展

    WEB 源码在安全测试中是非常重要的信息来源,可以用来代码审计漏洞也可以用来做信息突破口,其中 WEB 源码有很多技术需要简明分析. 知识点 关于 WEB 源码目录结构 后台目录.模板目录.数据库目录 ...

  6. ssh 免密访问

    首先配置三台机器的hosts文件 填写需要配置的三台主机ip,然后命名,这里我写的时 t1 t2 t3 三台机器上都要配置hosts文件,要配置一样. 三台机器改完后保存退出 ping一下刚才配置的三 ...

  7. VBoxNetAdpCtl: Error while adding new interface: failed to open /dev/vboxnetctl: No such file or directory.

    macOS VirtualBox Bridged Adapter 不能用 I'm running macOS High Sierra 10.13.1 and VirtualBox 5.2.2. Thi ...

  8. Unity SRP Batcher的工作原理

    https://blog.csdn.net/zakerhero/article/details/107714801

  9. 常用的Linux命令与它们的功能

    概要 filename 文件名 dir 文件夹名 string 字符串 username 用户名 groupname 组名 regex 正则表达式 path 路径 partition 分区名 port ...

  10. Oracle 低版本客户端连接19C报错ORA-28040

    # 适用范围12.2+# 问题概述客户使用Oracle11.2客户端连接Oracle 19c的时候,报错: ORA-28040: No matching authentication protocol ...