css设置body高100%在企业微信上下边有留白

最新推荐文章于 2021-09-17 09:59:37 发布
最新推荐文章于 2021-09-17 09:59:37 发布
阅读量452 收藏
点赞数
分类专栏： h5 文章标签： h5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/judykang123/article/details/112168578
版权

只需要把100%改成100vh就好了

但是！如果企业微信的h5页面上有需要召唤软键盘的，比如input、textarea，那就会造成html标签被顶起来，个人试过定位，滚动之类的，但都不怎么好使，手动加高body的高度也只能第一次召唤软键盘的时候有用，枯了

如果有大神研究出来麻烦评论里踢我一脚，给个链接也行

judy_1118
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
html body 100%
weixin_30341735的博客
12-06 72
html body 100% html <div class="header"> </div> <div class="main"> </div> <div class="footer footer--position-bottom"> </div...
微信公众号input关闭键盘后导致页面底部会有留白
Allen_xianzhe的博客
04-29 784
微信页面超出页面高度有滚动条时，点击input会有留白 解决办法 绑定一个blur事件，当其触发时，使scrollTo滚动到本身页面滚动条的距离 ######## 代码 可以解决以上问题 ...
h5页面页面在iphoneX手机上底部会有留白解决办法
m0_37653407的博客
05-12 2163
在meta viewport标签里加属性：viewport-fit=cover；如下 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
微信小程序图片底部留白的问题
沛哥儿的专栏
09-17 1933
前端不丰富。找了几个网上的例子，根据例子，实验得到解决方案如下。 1、将包裹的view增加display属性。值：display。 2、将image设置为垂直对齐模式。vertical-align:top，因为图片是要占满整个水平宽度的，设置mode="widthFix" 整个样式如下： <view style = 'display:flex;'> <image src='../../a.jpg' mode = 'widthFix' style = 'vertical...
微信小程序设置height 100% 不起作用解决办法
衡与墨的博客
09-05 1万+
https://blog.csdn.net/wshpwangshiyu/article/details/79744884 问题：小程序设置背景图片高度适应整个屏幕，设置height 100% 不起作用？ .container-all{ width: 100%; height: 100%; } .bg-img{ width: 100%; height: 100%;...
微信小程序图片宽100%显示并且不变形
11-18
在微信小程序中，正确地显示图片并保持其原始比例，以避免变形，是开发者经常会遇到的问题。本篇文章将深入探讨如何实现微信小程序图片宽度100%显示且不失真的方法。 首先，我们要明白，微信小程序的图像渲染与传统...
CSS实现微信扫码特效
12-13
微信扫码效果如下所示： 下面是实际效果：(可以自己移动鼠标，尝试效果)(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。) 现在就一个一个效果单独演示： 演示demo的HTML内容为： 复制代码代码如下:”...
事项助手（在日历上添加事件备注）微信小程序Demo
03-15
在微信小程序中，图片资源的优化和管理对于提升用户体验和应用性能至关重要。 `datas`可能包含了一些模拟数据，用于页面的展示和测试。在开发过程中，开发者会使用这些数据来验证功能是否正常工作，同时在实际使用...
微信小程序中使元素占满整个屏幕高度实现方法
01-03
微信小程序中使元素占满整个...在微信小程序中则需要调用wx.getSystemInfo接口，然后通过setData赋值 但是显然通过js来进行的，效率上肯定不如css直接给定样式。 于是我们使用另一种方法: 在网页中设置body,html{hei
微信小程序中设置高度height:100%;无效
qq_36618620的博客
12-10 8626
html,body{ height: 100%; } .topView{ width: 100%; height: 40px; background-color: blue; } .conView{ width: 100%; height: 70%; background-color: gainsboro; } 原为以上代码，可编译后height:100%;无效 ...
vue中高度给100%,底部还是留白
ybilss的博客
03-18 2246
在vue中,如登录界面,最外的div 高度给100%,底部还是有留白,今天特意去查了一下, 解决方案: 宽度给了100vw,高度给了100vh,就解决了 这里说到适配问题,只谈100%和100vh的区别: vh就是当前屏幕可见高度的1%,也就是说 100vh == 100%, 如果当元素没有内容的时候，设置height:100%该元素不会被撑开， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
H5页面的高度宽度100%
weixin_34163553的博客
04-17 2985
解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh和vw来布局。100vh和100vw就是你设备的高度和宽度。先把外面盒子固定下来，所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白。像你这种盒子比较少的可以用js获取设备的...
h5移动端底部会有大片莫名其妙的空白并且可以滑动
明日复明日的博客
04-15 3519
vue写的，不知道为什么渲染的视图会多个div的空白。原因还在找。 解决办法是在main.js里引入的全局css里面设置禁止上下滑动。 html,body{ overflow: hidden; height: 100%; } ...
h5页面在新版微信iOS 端出现底部白色导航条
xiang1907的博客
01-15 4004
新版微信在苹果iOS 端的h5页面如果有路由跳转，会出现底部白色导航条，出现此情况的原因是： 由于底部导航栏是因为出现history记录才出现的。使用replace就没有history记录，解决办法使用history.replace代替history.push 比如Vue中解决方式： 1 . dom跳转：<router-link :to="pageUrl" replace&gt...
H5开发在微信浏览器上，加载时“白屏”问题
热门推荐
jilinmly的博客
10-24 2万+
前天开发了一个简单的邀请函，整体8个页面，不足8M，在PC端模拟器上打开没有问题，在手机的其他浏览器中也没有问题。唯独在微信浏览器中加载时会出现长时间白屏，用户体验很不好 一番检查下来，因为写的太随心了，最后发现了两个BUG   ———————————正文——————————— 1. 不要把太多（ 最好没有）需要下载或者加载速度过慢的js放在body之前，因为会阻断H5dom的渲染，那么在...
css解决图片底部留白问题
shunzizhan
03-16 9720
最近面试遇到一个问题，感觉还是比较意思的，就记录一下。背景：    在div中包裹图片和一段文本，会发现img下面有一丢丢间隙&lt;html&gt; &lt;head&gt; &lt;style&gt; *{ margin:0; padding:0; } .main{ background-color: #efefef; } img{ ...
微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题【亲测有效】
**My Coding Family**
03-17 1万+
微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题【亲测有效】
vue3设置body缩放后控制高度100%
最新发布
05-17
在Vue3中，你可以使用以下CSS样式来控制body元素的高度： ``` body { height: 100%; overflow: hidden; } html { height: 100%; overflow: hidden; } /* 设置body缩放 */ body.zoom { transform: scale(0.8); transform-origin: 0 0; } ``` 这里通过设置body和html元素的高度为100%来确保它们占据整个屏幕，而通过设置overflow:hidden来防止内容溢出。然后，通过添加.zoom类来设置body元素的缩放，并使用transform-origin属性将缩放原点设置为左上角。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值