使用jQuery计算窗口调整大小时的div高度

Question

I'm aiming to dynamically change the height of a div as the window is resized.

I'm successful when wrapping the jQuery in a function such as $(window).smartresize(function () { } , however, this breaks another area of the functionality.

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 );

This is the area I'm most interested in improving:

$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());

Please let me know if you require further information, hopefully there's an easy fix, thank you

Answer 1

I think with you can resize with CSS, using percent of window. You can define percent for some especifics size of devices. I just create this css for example of 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%;
    }
}

Sorry, for my poor english.