javascript - 移动端如何做到自适应高度？

Question

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

Answer 1

height:100vh可破

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

你可以试试 vh 这个单位

Answer 7

楼上正解
100vh，亲测