最近忙于第二版网站功能bug制作修改，交互逻辑完成，但是准备换一下布局和整体色调，算是一次小改，趁机会把一直没有实现的功能抽时间解决了下——自适应屏幕高度。
页面的整体布局如图基本分为3个div：（网站具体页面截图不透露了，以3个div演示）
最上方的蓝色部分为导航栏，中间带图像的浅色区域为交互显示区域，，底部蓝色区域为缩略图区域。
因为是做人工智能医疗的网站，交互的东西会多一些，图中的片子是b超甲状腺的影像，可以进行画笔、圈取病变、ct影像还有调节影像窗宽窗位的功能、等等。底部的缩略图会显示当前病例的文件（1~n张图像）的缩略图。
最开始只想到了屏幕宽度的自适应，因为根据屏幕不同的宽度，绘制不同数量的缩略图。但在实际测试中发现在不同屏幕上，画布canvas的长度和宽度是固定的，也就造成大屏幕上正好一屏显示了，小屏幕笔记本，一屏显示不下。
就造成，无限的滚动查看屏幕（切换缩略图，canvas交互，导航栏工具使用，三部分的切换），体验感很差。
最近有时间修正了一下这个bug，无论在任何分辨率的屏幕上都正好盛满一整屏幕。
最初的想法就是直接设置div百分比不就行了？这种办法可行，但不适用我的网站，很简单的实现方法有局限性
<html> <head> <style type="text/css"> html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;} .main{width:100%; height:100%; overflow:hidden; margin:0;padding:0;} .div1{width:100%; height:80px; color:#fff;background-color:#369; text-align:center;} .div2{width:100%; height:100%;color:#fff;background-color:#FF0000;text-align:center;"} </style> </head> <body> <div class="div1">
div1
</div> <div class="main"> <div class="div2">
div2
</div> </div> </body> </html>
可以复制代码去看一下，就不截屏了，这个方法只限于小部分：div.main是撑满屏幕100%的，也不是完全充满，在先绘制div1后，剩下屏幕的位置会全部充满，也就是说，如果mian后边还有div，那就直接下一屏幕了，当前屏幕已经被div1:100px；和剩下的main100%沾满了。按照这样实现底下的缩略图没有了 ，如果给main设置个80%或者90%，也不能无缝的实现。
最后还是要js动态实现，实现第一版：div根据屏幕初始高度自适应，基本功能实现，但是高度的设置只限于documen.ready,完成后，调整浏览器的尺寸，div固定大小了，并没有动态调整。有没有一种监听浏览器窗口变化的事件呢？后来上网查询，查到了windows.onresize这个api，经过调整最终实现了功能。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style> </style> </head> <body> <div style="100%;height:100px;background-color:blue;"> @01 </div> <div id="main" style="background-color: lightblue; 100%;height:100px;"> <div id="show_div" style="background-color: lightblue; 100%;height: 100%;text-align:center;"> <canvas id ="canvas" style="720px; height: 100%;z-index:2;"></canvas> </div> </div> <div style="100%;height:100px;background-color:blue;"> @03 </div> </body> </html>
js代码:
<script> var cv=document.getElementById("canvas"); var context=cv.getContext("2d"); $(document).ready(function() { var clientheight=document.documentElement.clientHeight; console.log(clientheight); console.log(" %c Feng V1.0 %c ","color: #fadfa3; background: #4f98fd; padding:5px 0;","background: #fadfa3; padding:5px 0;"); $("#main").get(0).style.height=clientheight-200+"px"; $("#canvas").get(0).style.width=(clientheight-200)*1.25+"px"; console.log($("#main").get(0).style.height); var imgLoad=new Image(); imgLoad.src = "001.jpg"; imgLoad.onload = function (){ context.clearRect (0 , 0 , canvas.width , canvas.height ) ; context.drawImage (imgLoad,0,0,canvas.width,canvas.height) ; console.log("imgLoad."+imgLoad.width); console.log("imgLoad.height:"+imgLoad.height); } }); window.onresize = change; function change(){ var clientheight=document.documentElement.clientHeight; console.log(clientheight); $("#main").get(0).style.height=clientheight-200+"px";
//图像尺寸为5:4，这里给width也做一个动态调整。 $("#canvas").get(0).style.width=(clientheight-200)*1.25+"px"; console.log($("#main").get(0).style.height); } </script>
有两点注意：每一次d都要重新为clientheight赋值， 网上说在谷歌浏览器里，windows.onresize会执行两次，我没有遇到，如果遇到这个情况，设置一个判断即可