[前端]GOFLY在线客服-使用vh、vw使div元素充满屏幕-GO语言实现开源独立部署客服系统
2023-02-18 15:36:30 时间
当进行布局的时候,有时候需要div元素根据屏幕的宽度和高度进行自适应,而不是根据内容
除了使用js方法之外,还可以使用css3的新单位 vh wh
1vh=视窗高度的1%,height: 100vh;就是屏幕高度的100%
1vw=视窗宽度的1%,width: 100vw;就是屏幕宽度的100%
vw、vh 与 % 百分比的区别
(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的。
*{ padding: 0; margin: 0; } .content{ width: 100vw; height: 100vh; background: #1c7430; }
1vh=视窗高度的1%,height: 100vh;就是屏幕高度的100%
相关文章
- 【补充】Gitlab 部署 CI 持续集成
- Google Chrome 应用商店上传扩展程序
- 实践GoF的23种设计模式:观察者模式
- Ubuntu Docker 安装和配置 GitLab CI 持续集成
- Ubuntu 简单安装和配置 GitLab
- 二进制SCA指纹提取黑科技:Go语言逆向技术
- 解读Go分布式链路追踪实现原理
- 基于C#的MongoDB数据库开发应用(4)--Redis的安装及使用
- 基于C#的MongoDB数据库开发应用(3)--MongoDB数据库的C#开发之异步接口
- 基于C#的MongoDB数据库开发应用(1)--MongoDB数据库的基础知识和使用
- Linux 常用命令(持续补充)
- 云小课|3种常用Git工作流推荐
- 实践GoF的23种设计模式:装饰者模式
- git bisect:让你闭眼都能定位疑难 bug的利器
- 通用权限管理系统多语言开发标准接口 - java,php 调用标准接口程序参考
- 收到Sybase公司PowerDesigner产品的律师函后,只能改进一下思路了
- 实践GoF的设计模式:工厂方法模式
- 有了这10个GitHub仓库,开发者如同buff加持
- 【clickhouse专栏】对标mongodb存储类JSON数据文档统计分析
- linux-ext4格式文件误删除,该如何恢复?