做为一个前端开发者，总有一天我们要设置页面某一部分内容自适应浏览器窗口大小，下面分享下使用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. Mac实现截图OCR输出文字功能

    为什么要这个功能 工作中会经常遇到需要识别一个图片中的文本内容,需要快速的OCR识别,从而提高工作效率: 如何实现 snipaste + pngpaste + tesseract 安装流程与使用 安装 ...

  2. Java 接口内容小结

    Java接口学习:https://www.cnblogs.com/mlllily/p/14923837.html 小结内容: 在Java9+版本中,接口内容可以有常量.抽象方法.默认方法.静态方法.私 ...

  3. Visual C++ Redistributable for Visual Studio各版本下载地址

    Visual C++ Redistributable for Visual Studio各版本下载地址飞鹰_天涯于 2021-06-24 09:35:21 发布 5978收藏 8版权Microsoft ...

  4. JavaScript 基础学习（一）

    JavaScript基础学习(一) 一.JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件 ...

  5. conda pytorch 配置

    主要步骤: 0.安装anaconda3(基本没问题) 1.配置清华的源(基本没问题) 2.查看python版本,运行 python3 -V: 查看CUDA版本,运行 nvcc -V 3.如果想用最新版 ...

  6. Solution Set - 杭电多校 2022 Day2 一句话题解

    A:看了题就很容易想到虚树吧,建出虚树后考虑整体扫一遍虚树,注意到这是一棵根向树,那么统计其实十分简单,将对 \(C\) 类节点的标记下放,\(A,B\) 类节点同时上传,如果在 DFS 的过程中发现 ...

  7. 【剑指Offer】【链表】链表中环的入口结点

    题目:给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. A:创建两个指针,一个pFast一个pSlow指向链头,pFast一次走2步,pSlow一次走1步,如果两个指针必相遇 ...

  8. MongoDB的启动与停止

    1:启动和停止Mongodb    1)从命令行启动      执行mongod,启动MongoDB服务器,mongod有很多可配置的启动选项,可以使用mongod --help查看所有选项   -- ...

  9. PAT-basic-1025 反转链表 java c++

    一.题目 给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6→5→4:如果 K 为 4, ...

  10. lui - imageViewer - 图片查看器

    imageViewer - 图片查看器 ImageViewer Table Attributes 参数 说明 类型 可选值 默认值 urlList 图片列表 Array - [] onChange 图 ...