移动端如何做到自适应高度?

问题是这样的,写了一个页面,刚开始用的是px,然后在小屏幕手机中正常,然后大屏幕手机完全缩小了,下面还留白,什么情况。结果没办法,用百分比啊,rem各种试,最后问题不大了,就这个时候才发现最大的一个问题,高度还是无法自适应,小屏幕可以喂饱,大屏幕下面白色的内内又露出了。好羞涩,问问大神怎么办,要把内内遮住,不露出来,高度自适应。
ps:height:100%已经设置了,貌似它不理我,一副高冷样。

height:100vh可破

$(“body”).css( “height” , $(window).height +”px”)
用js这样可以

手机端确实坑,一般的外层元素是没必要给定值,不然就存在很多隐患,高度一般是靠内里的元素自撑高的,你设置了100%的高度很多情况下是没有用的,你可以试试给个上下的padding值。不过在具体的项目上,比如你的内里元素只有300px,但是客户的手机却是iphone6plus…,留白是肯定的啊。一般的项目都会有一个底色,倒是能一定程度上掩盖这种尴尬。如果你一定要做到所有型号的终端设备上运行效果一样,那你就做一个终端设备判断的js,然后动态渲染吧(很繁琐)。希望对你有帮助

如果内容背景有颜色,给body加个同样的背景颜色就可以了

var oBody=document.getElementsByTagName('body')[0];
oBody.style.height=document.documentElement.clientHeight+'px';

你可以试试 vh 这个单位

楼上正解
100vh,亲测

  • js文件如何获取谁引用了自己?
  • WebStorm 双击单词,匹配到所有的一样的,但是修改单词,匹配到的都修改了?
  • 如何在一个元素下取子元素.而不取到子元素内元素.
  • mongodb使用mongoose没有办法链接,但是软件Robomongo和命令mongo都可以连接
  • 图片网站前端架构
  • 在react中如果强制给state赋值,会有什么坏处?
  • 把数据库的字符串输出来作为html的结构?
  • 类似GrapesJS 的无编码构建web模板的工具
  • 如何尽可能地压缩图片?
  • 用Python实现的HTTP服务器无法显示图片
  • 去除html5 页面的纵向滚动条