如何使网页内容布满整个屏幕

今天写移动端页面的时候，遇到一个问题，需求是如果页面内容不满一屏的让他占满一屏，如果超过一屏的可以滑动。

大致的思路是，计算页面顶部和底部的高度，然后当前手机设备的高度，判断当前手机高度-（页面顶部高度+页面底部高度）是否大于0，如果大于0，页面中间部分的高度等于差值；

如果小于0，就滑动

具体代码如下：

 <div id="topH">
	<div></div>
  </div>
  <div id="middleH"></div>
  <div id="bottomH">
	<div></div>
  </div>

　　

window.addEventListener("load", function() {
    var screenH = window.screen.height; //手机设备的屏幕高度
    var topH = document.getElementById("topH").offsetHeight;//页面顶部的高度
    var bottomH = document.getElementById("bottomH ").offsetHeight;
    var middleH = screenH - ( topH + bottomH);
    if(middleH >0){
       document.getElememtById("middleH").style.height = middleH +"px";
    }else{
    //可以什么都不写
   }
});    

　　这样就可以根据不同的手机屏幕进行适配。

转载于:https://www.cnblogs.com/taiyanghua0522/p/7028399.html