JavaScript获取屏幕可视区域的高度

悠悠 2022-03-19 14:14 504阅读 0赞

开发工具与关键技术：DW/浏览器 ； JavaScript。  
作者：刘佳明  
撰写时间：2019年 2 月 17 日

本篇为大家简单阐述编程使如何让页面的窗口高度随着屏幕可视的高度变化而变化；

该方法不同于之前所使用的响应式布局；

响应式布局是页面窗口整个都随屏幕可视区域的变化而变化；包括它的宽和高；

而这次所应用的方法是使用JavaScript来实现；window.innerHeight;

在这里以我学习的一个点餐系统的页面来做详细解说；（注：代码及效果图都来自于老师！！！）；

首先；以下是点餐系统关于获取屏幕高度已经完成的效果图；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]  
直观可以看出并没有什么问题；我们用最简单的方法直接给盒子设置一个高度也可以做出这样的效果；但在这里是使用JavaScript来获取屏幕可视的高度来给盒子设置高度；

不做任何的代码改变，给该页面检查可以看出如下效果；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]

其中下部的图片代码如；`background: #0072bc url(Images/pr_1.png) center bottom no-repeat;`  
于此可以看出该页面确实是实现了屏幕高度的变化而变化；

代码解释：
    
    HTML部分：
    <body>
    	<div class="container" id="container" style="top: 0px;">
    		
    		<div class="screen screen1"></div>
    		
    		
    		<div class="downBtn" id="downBtn">
    			<img src="Images/top.png" alt="下一屏">
    		</div>
    	</div>
    </body>
    CSS部分；
    *{
    	padding:0px;
    	margin:0px;
    }
    .container{
    	/*background:#ccc;*/
    	position: absolute;
    	width: 100%;
    }
    .screen{
    	width:100%;
    }
    .screen1{
    	background: #0072bc url(Images/pr_1.png) center bottom no-repeat;
    }
    body{
    	overflow: hidden;
    }
    
    JavaScript部分：
    var height = 0;
    window.onload = function(){
    	//调用设置元素高度的函数
    	setHeight();
    	
    	
    };
    
    //设置元素高度
    function setHeight(){
    	var screenList = document.getElementsByClassName("screen");
    	height = window.innerHeight;
    	//alert(height);
    	for(var i=0;i<screenList.length;i++){
    		screenList[i].style.height = height+"px";
    	}
    }
    //当窗口尺寸发生变化的时候，调用设置元素高度的函数
    window.onresize = function(){
    	setHeight();
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220319/83e4cead66744c8db99cab7310073459.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]: /images/20220319/3fa9f0eb542445cc93f83b237609ed18.png