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

    _fmt_metric这个xgboost的回调函数已经被遗弃了. 为了能跑起来tvm,可以pip install xgboost==1.5.0

  2. 为什么要有jvm，jvm的作用？

    jvm的两个作用:第一.运行并管理java源码文件所生成的Class文件.第二.在不同的操作系统上安装不同的jvm,从而去实现跨平台的一个保障. 一般情况下,即使不熟悉jvm的运行机制,也不影响业务代 ...

  3. python测试IP地址是否ping通

    import timeimport osdef pingComputer(): for i in range(1, 256): host = '192.168.2.' + str(i) status1 ...

  4. EasyUI异步Tree默认请求id获取不到问题

    在做淘淘商城项目过程中,在新增商品-选择类目时,使用EasyUI的异步Tree功能,根据视频教程封装了一个common pojo--EUTreeNode对象,属性值取parentId(id).text ...

  5. C语言 数据编码方式

    一.整形数据类型 1.无符号数的编码 无符号数指的是整个机器字长的全部位数均表示数值位. 我们用函数      来进行运算.(B2U是Binary to Unsigned的缩写,长度为w),x代表为0 ...

  6. 【C++复习】第八章 多态性（2）（虚函数，纯虚函数）

    虚函数是动态绑定的基础,必须是非静态的成员函数 1.一般虚函数 1.1 引例 程序 运行结果&解释 #include <iostream> using namespace std; ...

  7. vector 搜罗最强版

    vector 常见用法(以int类型为例) https://www.cnblogs.com/YJthua-china/p/6550960.html 概括描述总体vector,包括内存的探讨 https ...

  8. 397. 整数替换 (Medium

    问题描述 397. 整数替换 (Medium) 给定一个正整数 n ,你可以做如下操作: 如果 n 是偶数,则用 n / 2 替换 n. 如果 n 是奇数,则可以用 n + 1 或 n - 1 替换 ...

  9. mqtt安装和使用

    linux下 下载: wget https://www.emqx.io/downloads/broker/v3.2.1/emqx-centos7-v3.2.1.zip 解压:unzip emqx-ce ...

  10. 2022-3-29内部群每日三题-清辉PMP

    1.一名高管,也是上报升级的联系人,在生产启动期间加入一个敏捷团队.在下一个sprint之前,该高管向团队询问应包含的特性.该高管应已参加什么会议? A.回顾会议. B.每日scrum会议. C.Sp ...