是否使用vh或%显示和隐藏滚动上的内容？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

微信小程序解决ios页面上推问题

相信大家写原生小程序都遇到过一个问题，当输入框聚焦键盘弹起时，页面会自动上推，使得输入框刚好位于键盘之上，在安卓中推动的只是内容，但在ios中，推动的是整个页面，导致导航栏被推出屏幕外，如下：图片针对这个问题...，目前的解决方案是将自动上推改成手动上推，让我们自己来控制页面内容的滚动。...，若使用的是自定义导航栏，那么B/D/E/H都会再加上G区域，E/H在官方文档有说到，是元素基于显示区域的坐标位置。...键盘弹起后，获取到键盘的高度C，用显示区域B减去键盘区域C就是我们可使用的区域D获取输入栏底部距离显示区域的坐标，如E/H若输入栏底部坐标小于可使用区域D，如H，则说明当键盘弹起时，该输入栏不会被键盘遮挡...textarea绑定键盘事件，input会触发该textarea的键盘事件解决1：使用方案二解决2：某些特殊情况，可以将textarea隐藏，不要在键盘弹起时让input和textarea同时存在页面中

5.7K3 0

前端零基础教学开始第六天 06 – day 多种定位方法和精灵图使用元素的显示与隐藏…

/*visible溢出可见 overflow: visible;*/ /*超出自动显示滚动条不超出不显示滚动条 overflow: auto;*/ /*不显示超过尺寸的内容超出部分隐藏...overflow: auto;*/ /*不显示超过尺寸的内容超出部分隐藏 overflow: hidden;*/ /*不管超出内容否，总是显示滚动条 overflow...在css 中三个显示和隐藏的单词比较常见，我们要区分开他们分别是display visibility 和 overflow display 显示 display:none 隐藏对象与它相反的是display...:block除了转换为块元素之外，同时还有显示元素的意思特点：隐藏之后，不在保留位置 visibility 可见性设置或检索是否显示对象 visible ：对象可视 hidden：对象隐藏显示三个小点 white-space 设置或检索对象内文本显示方式通常我们使用于强制一行显示内容 normal：默认处理方式 nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

3.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

6.listview显示不用条目

文件夹页面布局只有一个listview，可以继承listactivity，这样少写一个布局文件 tool: * @param index 箱子的索引值 * @return * 对应的uri 或null...，解决方法每个条目判断和上一个条目是否是同一天，不是显示，是隐藏，但是会不停的判读在获取日期信息的时候保存到集合，不是同一天就保存，用第二种，缺点一次性全部取出效率不高 public class FolderDetail...*/ private String[] projection={ "body","_id","address","date" }; /** * 短信内容所在列的索引值为 0 */...) view.getTag(); //TODO //设置短信内容 vh.body.setText(cursor.getString(INDEX_BODY)); //设置时间 long...); }else{ // 否则，就隐藏标题 vh.title.setVisibility(View.GONE); } } } class FolderDetailViewHolder

82310 0

移动端避免使用100vh

核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。如下所示： ?...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...无论地址栏是否可见，屏幕都将是视口的高度。此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近，但鉴于其在移动设备上的局限性，最好避免使用它。

1.9K2 0

移动端避免使用100vh

核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。...如下所示：当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...无论地址栏是否可见，屏幕都将是视口的高度。此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近，但鉴于其在移动设备上的局限性，最好避免使用它。

2K2 0

在移动端避免使用100vh「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。在移动端避免使用100vh CSS中的Viewport单元听起来很棒。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。...这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。...如下所示：当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应该在屏幕底部的按钮被隐藏了。...更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部，因此用户体验是很糟糕的。

2.7K2 1

4.TableLayout、回调接口

-- android:shrinkColumns="0" 压缩第0列，当第0列的内容过多时，不至于将其他列的内容，挤出屏幕 --> <TableLayout android:id=...-- android:shrinkColumns="1" 压缩第0列，当第0列的内容过多时，不至于将其他列的内容，挤出屏幕 --> <TableLayout android:id=...(v.getId()) { case R.id.btn_back: // 后退按钮 finish(); break; case R.id.btn_ok: // 确定按钮 //先判断输入的是否有内容...(Context.INPUT_METHOD_SERVICE); // 隐藏输入法的 API imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS...(View.GONE); vh.tlSend.setVisibility(View.VISIBLE); //设置短信内容 vh.msgSend.setText(text); vh.dateSend.setText

1.2K12 0

实用的AI：使用OpenAI GPT2，Sentence BERT和Berkley选区解析器从任何内容自动生成对或错问题

输出：该输出将是一组自动生成的真和假的句子，与真正的句子直接从未来上述文章和假的句子通过生成OpenAI GPT2使用从所述制品的真正的句子。...这些方法可用于解决上述2）和4）。在本文中，将使用6）更改名词短语或动词短语来生成True和False语句。请继续阅读本文开头共享的Jupyter笔记本。首先安装以下库。...步骤2：汇总已加载的内容使用summa提取摘要器库汇总加载的内容。同样从摘要句子中删除包含单引号，双引号和问号的句子，因为它们不适合生成“真”或“假”测验。...步骤3：使用Berkley选区解析器在适当的位置拆分句子在这里，使用Berkley选区解析器在结尾的动词短语或名词短语处拆分句子。...经过了一个非常实用的项目，结合了最新的NLP（OpenAI GPT2，Sentence BERT和Berkley Neural Parser），为教育内容生成了对错题。

9242 0

3.CursorAdapter

，改变全选按钮的状态 // 判断 selectItemSet 的size 和listView的条目数量，是否相同，如果相同，全选按钮，就不可用。...context, Cursor cursor) { ViewHolder vh = (ViewHolder) view.getTag(); //显示短信内容 vh.body.setText(...使用系统工具类，判断是否是今天 if(DateUtils.isToday(when)){ dateStr = DateFormat.getTimeFormat(ctx).format(when...(false); } }else{ //否则，隐藏 vh.checkbox.setVisibility(View.GONE); } } } /** * 存储在编辑状态下，选中的...：无序，不可重置，如果添加的内容之前已经有了，会覆盖。

1.3K15 0

CSS | 视差滚动 | 笔记

让我们探索和比较固定背景位置和使用 3D 平移。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。...在上图中，应该在屏幕底部的按钮被隐藏了。更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部，因此用户体验是很糟糕的。...这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。显示雪碧图的条件： 1. 一个设置好宽和高的容器 2.

8152 1

避免在移动端页面中使用100vh

100vh在移动浏览器中以一种微妙但基本的方式被破坏，使其几乎无用。最好避免使用100vh，而应该通过javascript设置高度的方式来获得完整的视口体验。...核心问题是移动浏览器（说的就是你，Chrome和Safari）具有“有用”功能：地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。...无论地址栏是否可见，屏幕都将是视口的高度。此外，在页面首次加载时将高度固定为适当的大小，可以防止在使用该网站的过程中地址栏隐藏，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大（greatness），但考虑到它在移动设备上的局限性，最好避免使用它。

1.6K3 0

hhdb数据库介绍(10-6)

满足对单节点、主备节点、多节点和容灾模式集群的跨版本或小版本升级迭代。同时可为用户提供升级过程突发异常情况时的自动回滚保护机制，程序尽量保证将集群回滚至升级前的状态减少对线上业务的影响。...当前为主备集群模式时：会显示“升级后是否回切”信息，选择“是”，则升级完毕后回切到原来的主计算节点;若选择“否”，则保持计算节点主备互换后的状态（升级过程中会执行主备高可用切换）。...当选择的集群为容灾模式集群时，容灾模式为开启状态,否则为未开启状态更新版本需要用户手动上传或选择已有的升级包。...人工介入时可通过详细更新日志查看程序执行的命令与升级或回滚的阶段，帮助恢复集群注意支持对已安装NDB服务的计算节点进行版本升级，升级过程中管理平台自动将原计算节点NDB安装目录拷贝到新计算节点版本目录下...，未配置监听程序时无法升级上传监听程序包后，点击开始更新若上传的监听程序包名含jdk8或jdk11字样，且当前待更新监听程序的服务器jdk非jdk8或jdk11版本，则需根据提示先更新jdk版本在升级前也可手动执行以下命令检查是否安装对应版本的

411 0

单屏页面响应式适配玩法

，完全按照桌面分辨率来显示是没问题的，不过高度随便调节一下（变小），而宽度还是很宽，这时候页面底部的部分文本就会溢出被隐藏掉。...我们不需要考虑更低端的浏览器，所以可以使用比较前沿的特性，如 pointer-events 等特性。所以使用 vh 做适配方案，vh 是什么单位详情可以自己查阅一下文档，这里做个简单介绍。...8.1、尝试 rem + vh 方案一开始想的是 rem + vh 结合使用，根元素 html 使用 vh，其他单位则使用 rem，然后找到有问题的宽高比，通过 @media 方式设置 html 为...8.2、落地方案，vh + vw + JavaScript 计算而直接在元素的属性值上设置为 vh 或 vw，所有的值都会实时变动，没有最小值（除了属性为字体有最小值），这样就最大程度减少 UI 变乱的情况了...9、移动端移动端用户是没法操作浏览器的，所以基本上都是标准的长宽比，用 vh 最合适不过了，或 vw。

2K2 0

HTML和CSS常见问题整理

一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流。那么父元素中没有内容撑开其高度，这样父元素的height就会被忽略。...如何清除 1、父元素设置overflow: hidden(少用) 2、clearfix：使用内容生成的方式清除浮动，不会破坏文档流。...需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度...可以通过**@supports**来判断是否支持某个css属性。

1.5K3 0

01_移动端布局基础

我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。而是区分开来做自适应。然后每次用户访问的时候它就根据客户端的类型重定向。为什么呢？...如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。...1.3 移动Web开发基础 1.3.1 视口视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域...最大缩放比，取值范围为 0.0~10.0 minimum-scale 最小缩放比，取值范围为 0.0~10.0 user-scalable 用户是否可以缩放，其值为 yes 或 no viewport-fit...设备物理像素和设备独立像素比，即是指在理想布局宽度，使用多少个物理像素来渲染一个 CSS 像素。

981 0

CSS笔记

隐藏模块 10. :nth-child 11. vh/vw与%区别 12. export default 和 export 区别 13. undefined与null的区别 14....border-spacing 设置分隔单元格边框的距离。 caption-side 设置表格标题的位置。 empty-cells 设置是否显示表格中的空单元格。...11. vh/vw与%区别单位依赖于 % 元素的祖先元素 vh/vw 视口高度/宽度的尺寸（横屏/竖屏会自动变化） 12. export default 和 export 区别 export 与...3. none 一些特殊元素的默认display值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。...（和父元素的宽度一致），与内容无关），垂直方向排列。

2.2K1 0

💥 从小改动到系统崩溃：一场“蝴蝶效应”般的Debug惊魂记！

问题爆发：系统全面崩溃就在部署后的半小时内，噩梦开始了。用户反馈：多个页面加载超时，部分功能无法使用。监控告警：CPU使用率飙升，接口响应时间爆炸性增长。...在我们的改动上线后，每次用户详情接口被调用时，都会触发对channel字段的访问，而数据库在没有索引的情况下，默认进行全表扫描。在高并发环境下，这种全表扫描迅速拖垮了数据库连接池。...5.3 数据库字段管理需要标准化新增字段时，必须明确是否需要添加索引，不能因为字段少用而忽略潜在风险。5.4 紧急预案的必要性这次事故中，我们花费了大量时间排查和定位问题。...如果能提前建立有效的回滚机制，可能在第一时间就能恢复服务，避免进一步的用户投诉。结语这个故事让我深刻意识到，程序员的每一次“看似简单”的改动背后，都可能隐藏着不小的风险。...Java编程，就像滚雪球一样，越滚越大，指数级提升。

1552 1

封装 bilibili 播放器，自定义边下边播和缓存功能

本项目使用播放器是 ijkplay, 并且进行封装和修改。主要功能: 1. 重新编辑 ijkplay 的 so 库, 使其更精简和支持 https 协议； 2....库粘贴过来, (因为官方自带的so库是不支持https的, 我重新编译的这个so库支持https协议, 并且使用的是精简版的配置, 网上关于ijkplay编译的流程和配置挺多的, 可以根据自己的需求自定义...使用播放器的方法: 1....; //初始化一些播放状态, 如进度条,播放按钮,加载框等 //显示正在加载的界面 vh.iv_play_icon.setVisibility(View.GONE...重写 MediaDataSource , 使用 okhttp 实现边下边播和视频缓存 1.

1.5K3 0

2022高频前端面试题——CSS篇

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 animation-play-state：指定动画是否正在运行或已暂停...它有两种盒模型，W3C盒模型和IE盒模型（IE6以下，不包括IE6以及怪异模式下的IE5.5+）理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。...当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。 18. 如何触发重排和重绘？...参考回答：任何改变用来构建渲染树的信息都会导致一次重排或重绘：添加、删除、更新DOM节点通过display: none隐藏一个DOM节点-触发重排和重绘通过visibility: hidden隐藏一个...小图使用 base64 格式将多个图标文件整合到一张图片中（雪碧图）选择正确的图片格式：对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。

1.4K3 0

JS实现给网站添加加载动画

说明当进入网页时会先出现加载动画，当整个网页完全加载完毕后再显示正常网页。原理在html上方先放一个div，用来显示加载动画，然后js判断当网页加载完毕后再将这个div隐藏并显示原网页。... 这里是网页内容...width: 100%; height: 100%; overflow: hidden; } .loading-div { width: 100vh...; height: 100vh; background-color: #fff; display: table-cell; vertical-align:...loading-div::before { display: inline-block; vertical-align: middle; } JS判断部分： //注释部分是设置2秒的定时延迟

7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭