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

    前言 最近几天闲的没事,写了一个可以用来写简单的app程序的头文件,分享给大家! 头文库 #ifndef CAPP_H #define CAPP_H #include<bits/stdc++.h ...

  2. 如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度？

    如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度? 最开始想到的方法就是 div 宽度取 n%, style 设置 margin:auto. 但是这样有一个问题,一定距离是根据 n 的 ...

  3. 在Vue项目中使用wangEditor

    wangEditor官网 封装的Editor组件 <template> <div class="editor-wrap"> <div ref=&quo ...

  4. unity 资源打包，MD5值计算注意点

    仅作记录: unity3d在修改资源时,有些类型的资源修改的是源文件,比如:fbx,mp3,.jpg,.png等.这些资源是外部资源导入unity3d中,untiy3d导入编译时,生成相应的meta文 ...

  5. python 中的 re.compile 函数

    python 中的 re.compile 函数   正则表达式功能十分强大. "有些人面临一个问题时会想:'我知道,可以用正则表达式来解决这个问题.'于是现在他们就有两个问题了"- ...

  6. C#当窗体大小改变时，窗体中的控件大小也随之改变

    第一种:推荐 在窗体中加上如下代码即可实现,但窗体点击放大按钮时却不能改变控件大小. private Size beforeResizeSize = Size.Empty;protectedoverr ...

  7. python 的sys.argv 和 sys.path.append() 用法和PYTHONPATH环境变量

    sys.argv 我们编写一个测试用例test.py ,内容如下 imoprt sys a = sys.argv b = len(sys.argv) c = sys.argv[0] d = sys.a ...

  8. 模块一：时间模块、random模块、hashlib模块、日志模块

    模块:就是一系列功能的集合体,有以下分类:*解释器内建模块*python标准库(位于python解释器安装目录的lib文件夹下)*第三方模块(通过(pip install 模块名)语法下载到pytho ...

  9. Ubuntu 20.04 部署kubernetes 网络组件calico-v3.2.1

    1.官方网址: https://projectcalico.docs.tigera.io/archive/v3.21/getting-started/kubernetes/self-managed-o ...

  10. kubernetes中 pause的作用

    pause的作用 重要概念:Pod内的容器都是平等的关系,共享Network Namespace.共享文件 pause容器的最主要的作用:创建共享的网络名称空间,以便于其它容器以平等的关系加入此网络名 ...