使用jQuery計算div窗口的高度resize使用jQuery

Question

我打算在窗口大小調整時動態更改div的高度。

當我在包裝jQuery的功能如$(window).smartresize(function() { }時，我很成功，但是，這打破了功能的另一個領域。

HMTL

<section id="menu"> 

    <div class="menu-container"> 

     <ul class="menu__nav"> 
      <!-- menu nav --> 
     </ul> 

     <div class="menu__main"> 
      <!-- content --> 
     </div> 

     <div class="menu__main"> 
      <!-- content --> 
     </div> 

     <div class="menu__main"> 
      <!-- content --> 
     </div> 

    </div> 

</section> 

jQuery的

(function($) { 

    $(document).ready(function() { 

     var $mmenu = $('.menu__main'); 

     if ($mmenu.length > 0) { 

      var $mnav = $('.menu__nav'), 
       $mnav_a = $mnav.find('a'), 
       m = parseInt($mnav.outerHeight(true), 10), 
       $contain = $mmenu.closest('.menu-container'), 
       h = 0, 
       l = 0; 

      $mmenu.not(':eq(0)').hide(); 
      $mmenu.eq(0).addClass('active'); 
      $mnav_a.eq(0).addClass('active'); 

      $mmenu.each(function(z) { 

       var $this = $(this); 

       $this.css('height','auto'); 

       $this.css({ 
        zIndex: z+1, 
        position: 'absolute', 
        top: m + "px", 
        left: l, 
        height: (parseInt($this.outerHeight(false), 10) + m) + "px" 
       }); 

       l = l - $this.outerWidth(); 

      }); 

      $contain.height($mmenu.eq(0).height()); 

      $mnav_a.on('click', function(e) { 

       e.preventDefault(); 
       var $this = $(this); 

       if (!$this.hasClass('active')) { 

        $mmenu.stop(true, true); 

        $mnav_a.removeClass('active'); 
        $this.addClass('active'); 

        $mmenu.filter($('.active')) 
         .removeClass('active') 
         .fadeOut(250) 
         .animate({left:l+"px"}, 250); 

        var $target = $mmenu.filter($this.attr('href')); 

        $contain.animate({height:$target.height()}, 250); 

        $target.addClass('active') 
         .fadeIn(250) 
         .animate({left:0}, 250); 
       } 

       $this.blur(); 
      }); 
     } 
    }); 

}) (jQuery); 

這有利於提高我最感興趣的領域：

$mmenu.each(function(z) { 

    var $this = $(this); 

    $this.css('height','auto'); 

    $this.css({ 
     zIndex: z+1, 
     position: 'absolute', 
     top: m + "px", 
     left: l, 
     height: (parseInt($this.outerHeight(false), 10) + m) + "px" 
    }); 

    l = l - $this.outerWidth(); 

}); 

$contain.height($mmenu.eq(0).height()); 

請讓我知道如果你需要更多信息希望有一個簡單的修復，謝謝

Answer 1

我認爲你可以調整與CSS，使用百分比的窗口。您可以爲某些特定尺寸的設備定義百分比。我只是創建這個CSS例如funcionality。

@media (max-width: 480px) { 
    #divMenu { 
     width:40%; 
     height:70%; 
    } 
} 

@media (min-width: 480px) and (max-width: 1023px) { 
    #divMenu { 
     width:70%; 
     height:80%; 
    } 
} 

@media (min-width: 1024px) { 
    #divMenu { 
     width:50%; 
     height:50%; 
    } 
} 

對不起，對於我可憐的英語。