--window-top和--window-bottom

最新推荐文章于 2023-11-09 11:48:47 发布
最新推荐文章于 2023-11-09 11:48:47 发布
阅读量6.3k 收藏 7
点赞数 4
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gabriel_wei/article/details/115350953
版权

APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app新增了2个css变量：–window-top和–window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar上方悬浮一个菜单，之前写bottom:0。这样的写法编译到h5后，这个菜单会和tabbar重叠，位于屏幕底部。而改为使用bottom:var(–window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。

CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。’

https://ask.dcloud.net.cn/article/35232

Gabriel_wei
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp换行符号_uni-app 跨端开发注意事项
weixin_39739661的博客
12-20 7049
H5正常但App异常的可能性css异常：不支持的选择器 非H5端不支持*选择器；body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image...webview浏览器兼容性vue页面在App端，默认是被系统的webview渲染的(不是手机自带浏览器，是rom的webview)，在较老的手机上，比如Andr...
uni-app 页面样式
qq_57263284的博客
06-14 1869
uni-app 支持的通用 css 单位包括 px、rpxvue页面支持普通H5单位，但在nvue里不支持：nvue还不支持百分比单位。App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpxnvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：下面对 rpx 详细说明：设计师在提供设计图时，一般只提供一个
全新好用的窗口置顶工具WindowTop
Qt君
06-03 4961
全局快捷键功能可以配置窗口置顶，透明，穿透，画中画，截图等功能，而鼠标快捷键操作可以配置在对应窗口连续点击执行置顶窗口，窗口移动，最大化，最小化等操作。打开WindowTop软件，所有已打开的窗口都会在左上角出现一个置顶栏，点击置顶栏的置顶复选框即可置顶窗口或取消窗口。输入法提示功能可以在置顶栏实时显示输入法的状态，又或者以独立的小窗口显示。屏幕截图，窗口截图，支持自由编辑画图，并能将截图以贴图的方式贴在屏幕上。可改变置顶栏的外观，还可以自由拖动置顶栏到想要的位置。
适配
grbrb的博客
06-09 297
css s适配 iphonex 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视
uni-app前端H5页面底部内容被tabbar遮挡
最新发布
qq_44792224的博客
11-09 3351
在用uniapp写小程序的时候，底部有一部分内容没显示出来，被底部的tabbar遮挡住了。
abap新手资料-[sapscript编程指南-].doc
07-13
SET SIGN 设置符号，RESET 初始化编号段落，INCLUDE 包含其他文本，STYLE 改变样式，ADDRESS 格式化地址，TOP 和 BOTTOM 设置主窗口的头部和尾部文本，IF 和 CASE 实现条件文本，PERFORM 调用 ABAP 子程序，SUMMING ...
window对象--event对象详解
03-14
在给定的压缩包文件中，我们可以找到几个HTML文件，如`top.html`, `framedemo.html`, `bottom.html`, `bottom_right.html`。这些文件可能包含了一些网页布局或者框架（frame）的示例，其中可能用到了Window对象和...
jquery-qtip
07-30
position: { my: 'top left', at: 'bottom right' } // 定位选项 }); }); ``` 3. **自定义配置**：qTip提供了丰富的配置选项，如内容、样式、位置、触发行为等，可以根据需求进行定制。 ```javascript $('....
PT80-NEAT开发指南v1.1
06-24
版权和许可条款 ...................................................................................................................................... 1 第二章 PT80 开发入门 ..............................
jquery--frame--ziyuan
03-13
此外，我们还提到了`top`, `clientTop`, `scrollTop`, 和 `offsetTop`这四个属性，它们都是在处理元素位置和尺寸时非常重要的属性： 1. `top`: 代表元素相对于其包含块（如parent元素）的顶部距离。 2. `clientTop`...
uni-app知识点整理
oschina_41673164的博客
05-06 3043
一. 单位 1.换算规则： 1 px = 2 rpx 1 px = 0.75 pt = 3 / 4 pt 1 pt = 1.33 px = 4 / 3 px = 8 / 3 rpx 1 em = 16 px 1 em = 12 pt 1px = 1pt * 图像分辨率/72 rpx是基于 当前屏幕宽度与750的比值 算出来的，属于动态的。会根据不同屏幕进行换算。所以做响应式比较好用。 pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。 px (pixel，像素)：像素px是
前端实现吸顶 uniapp实现吸顶 置顶的效果
热门推荐
qq_40630924的博客
05-11 1万+
uni-App置顶 这里要注意不能嵌套 看图 .questionbag{ position: -webkit-sticky; /* #endif */ position: sticky; top: var(--window-top); z-index: 99; } 最后的样子
添加position：fixed定位小程序和H5页面页面高度不一样造成tabar遮挡问题
2203_75966395的博客
08-05 240
/
uniapp scroll-view顶部固定定位
m0_46678809的博客
10-30 2569
把scroll-view的top设为top:var(--window-top);提高等级 z-index。再把下面现实的内容一个外边距=scroll-view的高度。
vue 自定义CSS变量var()的办法（修改全局样式 v-style指令）
黄彪博客
12-08 1万+
文章目录一、参考二、问题描述三、第一个方案——动态 style 标签第一个例子第二个例子四、第二个方案——CSS 变量快速入门 CSS 变量 ，var() 函数Vue 修改CSS变量案例五、总结 一、参考 js修改style样式_Vue 动态样式黑魔法（超实用） CSS 变量教程 阮一峰 二、问题描述 工作中使用 elementUI 的scrollbar 组件，例如 <el-scrollbar wrap-class="demo-scrollbar-wrap-2">，只能让 wrap-cl
uniapp 开发注意事项
漫天随飞雪的博客
11-19 3932
1：v-show 改成 v-if 1.static目录下的js文件不会被编译，如果里面有es6的代码，不经过转换直接运行，在手机设备上会报错。 2.css、less/scss等资源同样不要放在static目录下，建议这些公用的资源放在common目录下。 3.template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径。 4.js文件不支持使用/开头的方式引入。 5.css文件或style标签内引入css文件时（scss、les...
CSS 高度(css height)
bytxl的专栏
11-17 2577
一、height高度语法   -   TOP 1、高度基本语法 Height:auto 设置高度自动 （通常默认高度是auto自动，自适用内容而增高，通常如果想高度自适应不用设置） Height:20px 设置高度为固定数值 2、CSS高度用法结构 #divcss5{height:50px} 设置了divcss5对象盒子高度为50px（像素） 3、height高
uni-app 设置定位 样式 bottom：0 后被标签栏遮挡
单飞吧的博客
01-15 1681
uni-app 设置固定定位，样式为 bottom：0 后被标签栏遮挡 解决办法 bottom: var(–window-bottom); .cartBottom { position: fixed; bottom: var(--window-bottom); width: 100%; height: 106rpx; background: red; }
cohen-sutherland算法c++代码
04-07
以下是C语言实现的Cohen-Sutherland算法代码： #include <stdio.h> #include <graphics.h> #define INSIDE 0 #define LEFT 1 #define RIGHT 2 #define BOTTOM 4 #define TOP 8 int xmin, ymin, xmax, ymax; int ComputeOutCode(int x, int y) { int code = INSIDE; if (x < xmin) { code |= LEFT; } else if (x > xmax) { code |= RIGHT; } if (y < ymin) { code |= BOTTOM; } else if (y > ymax) { code |= TOP; } return code; } void CohenSutherland(int x1, int y1, int x2, int y2) { int outcode1 = ComputeOutCode(x1, y1); int outcode2 = ComputeOutCode(x2, y2); while (1) { if (!(outcode1 | outcode2)) { // Both points inside window line(x1, y1, x2, y2); break; } else if (outcode1 & outcode2) { // Both points outside window and same region break; } else { int x, y, outcode; // At least one endpoint is outside the window if (outcode1) { outcode = outcode1; } else { outcode = outcode2; } // Find intersection point if (outcode & TOP) { x = x1 + (x2 - x1) * (ymax - y1) / (y2 - y1); y = ymax; } else if (outcode & BOTTOM) { x = x1 + (x2 - x1) * (ymin - y1) / (y2 - y1); y = ymin; } else if (outcode & RIGHT) { y = y1 + (y2 - y1) * (xmax - x1) / (x2 - x1); x = xmax; } else if (outcode & LEFT) { y = y1 + (y2 - y1) * (xmin - x1) / (x2 - x1); x = xmin; } // Update the point and outcode if (outcode == outcode1) { x1 = x; y1 = y; outcode1 = ComputeOutCode(x1, y1); } else { x2 = x; y2 = y; outcode2 = ComputeOutCode(x2, y2); } } } } int main() { int gd = DETECT, gm; initgraph(&gd, &gm, ""); xmin = 50; ymin = 50; xmax = 200; ymax = 200; rectangle(xmin, ymin, xmax, ymax); // Test cases CohenSutherland(10, 10, 300, 300); CohenSutherland(0, 150, 250, 150); CohenSutherland(150, 0, 150, 250); CohenSutherland(250, 250, 350, 350); getch(); closegraph(); return 0; }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值