做为一个前端开发者，总有一天我们要设置页面某一部分内容自适应浏览器窗口大小，下面分享下使用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. 【git】7.5 git工具-搜索

    资料来源: (1) https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E6%90%9C%E7%B4%A2 1.git grep 注1:使用g ...

  2. Android Studio 修改jar包中的.class代码

    修改a.jar中的b.class文件: 1.在Android Studio的项目中引入a.jar,sync,通过反编译找到并拷贝b.java的代码 2.使用压缩软件打开a.jar,并删掉需要修改的文件 ...

  3. 面试之CAS

    1.CAS(Compare And Swap)比较并替换,是线程并发运行时用到的一种技术或者算法,CAS与之对应的是一些锁技术,,例如synconozied,同事这种比较替换的思想也可以运用到数据库上 ...

  4. 远程ubuntu虚拟机（VirtualBox）

    环境 实机win10,虚拟软件是Oracle VM VirtualBox 下载地址https://www.virtualbox.org/ ubuntu虚拟机配置 网络选桥接网卡, 原因是桥接网卡下,根 ...

  5. 转载安卓或苹果手机获取URL scheme方法

    首先,打开支付宝,来到需要抓取的小程序页面.此处以上海的随申码为例演示,打开随申办小程序,点击顶部的「随申码」按钮进入页面. 可以看出这个一个二级页面,如果想要使用 URL Scheme 一键访问,同 ...

  6. 看K线学炒股（8.10）

    今天大盘看起来疲软但强势的一天,收涨1.01%. 广东骏亚,现价21.39,看尾盘,这只票现在看还有下跌空间,但也有反弹可能,跌到21元以下均价上可加仓,博止跌反弹.现在60分钟线看有点阴雨绵绵的意思 ...

  7. MySQL之中文数据问题

    随笔记录方便自己和同路人查阅. #------------------------------------------------我是可耻的分割线--------------------------- ...

  8. WPF 后台实现按数字键滚动DataGrid 当前选中项

    最近遇到个项目,设备上没有鼠标,界面为全屏的一个DataGrid,需要实现按小键盘的0和1让DataGrid的当前选中行进行上下滚动 起到重要参考的是:   https://blog.csdn.net ...

  9. C# winfrom 添加Log4Net日志库

    简介:log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具.当项目发布之后遇到一些问题,无法 ...

  10. 1255. 得分最高的单词集合 (Hard)

    问题描述 1255. 得分最高的单词集合 (Hard) 你将会得到一份单词表 words,一个字母表 letters (可能会有重复字母),以及每个字母对应的得分情况表 score. 请你帮忙计算玩家 ...