div高度自适应

DIV高度自适应

小白一枚，做的前端实习生，主要任务是优化前端页面。今天碰到个棘手的问题，卡了俩小时，记录下心得。

需求：F11全屏以后，div的高度保持与窗口的底部保持一样的距离。

思路1：由于产品的界面是铺满整个屏幕，不能滚动。所以首先想到的是高度设置为百分比。结果gg，F11以后，并不能达到想要的效果。

思路2：根据键盘值来判断用户是否让界面全屏，

window.onkeydown = function (e) {
                var ct = 0;
                var myCode = e.keyCode;
                if (myCode == 122) {
                     ct++;
                     console.log(ct)
                    if（ct%2==1）
                     $('#C1').css('height','65%');
                 }else{
                     $('#C1').css('height','60%');
                 }
                 }

然而理想很丰满，现实很打脸。F11以后，div是随着增大了，但是退出全屏以后，div高度却不会再次缩小回来。

思路3：后来想到vh这个单位：
vh、vw：基于视口的尺寸，1vh = 1% viewportHeight , 1wh = 1% viewportWidth

		结果还是gg，F11以后还是div下面还是会空出来很大的一块的空白。

思路4：onresize 方法：
简单理解为当视图的宽高改变是触发的一个方法，只能用window调用：

 set_table_div();
    function set_table_div(){
        var h = $(window).height();
        $('#C1').css('height',(h-334)+'px');
       
    }
           window.onresize = function() {
               set_table_div();
              // mapResize();
              
              }

总算是达到了最终想要的效果，个人觉得要实现这个功能不需要用到onresize这个方法，应该有比这些更简便的方法。正在努力发掘中。