Div разочаровывает с JQuery высота авто

Я новичок в отзывчивом веб-дизайне, и я застрял, я уверен, что это будет какая-то глупая причина, но я изо всех сил пытаюсь ее решить. У меня есть div body_main_wrapper и его дочерние divs Functions_Panel_Wrapper и Function_Page_Wrapper, плавающие влево. высота родительского и дочернего divs вычисляется во время выполнения, используя jQuery. то, что я хочу, когда порт представления достигает менее 786, дочерние divs отображаются со 100% шириной и автоматической высотой.

Я использую else if (viewport width <786) height ("auto"), но мой дочерний div исчезает...

Плагин jQuery

(function ($) {


$.fn.adjust_BodyMainWrapper_Height = function () {

    $(window).bind('load resize', function () {

        var viewport_height = $(window).height();

        var viewport_width = $(window).width();

        var Wrapper_Height = (viewport_height - ($(".footer_wrapper").height()) - ($(".navbar-header").height()));

        //height of footer - height of header - height of current viewport// 
        $("#body_main_wrapper").css("height", Wrapper_Height + "px");

        if (viewport_width > 768) {

            //adjust height of Functions_Panel_Wrapper 
            $("#Functions_Panel_Wrapper").css("height", Wrapper_Height - 1 + "px");

            //adjust height of Function_Page_Wrapper 
            $(".Function_Page_Wrapper").css("height", Wrapper_Height - 1 + "px");
        }
        else if (viewport_width < 768) {
            $("#Functions_Panel_Wrapper").height("auto");
        }

    });
};

})(jQuery);

HTML

 <div class="body-content">

    <!--*************************** Main Body ***********************************-->

    <div id="body_main_wrapper">
        <!--Functions Panel Wrapper (left-side)-->
        <div id="Functions_Panel_Wrapper">
            <a>functions lists.....</a>
        </div>

        <!--Functions Page Wrapper (right-side)-->
        <div class="Function_Page_Wrapper">
            @RenderBody()
        </div> <!--end Function_Page_Wrapper-->
        <hr />
    </div> <!--end body_main_wrapper-->

        <!--*************************** Footer ***********************************-->
        <div class="footer_wrapper">
            <footer>
                <div class="container">
                    <div class="footer_Title_Wrapper">
                        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                    </div> <!--end footer_Title_Wrapper-->
                </div> <!--end container-->
            </footer>
        </div><!--end footer_wrapper-->
    </div> <!--end body-content-->

CSS

#body_main_wrapper{
width:100%;   
margin-top:-19px; 
background-color:grey;
}

#Functions_Panel_Wrapper{
width:20%;
float:left;
background-color:red;

}

.Function_Page_Wrapper{
width:79%;
float:left;
margin-left:1%;
background-color:pink;
}

@media (Max-width: 768px) {

 #Functions_Panel_Wrapper{ width:100%; float:none; }

 .Function_Page_Wrapper{ width:100%; float:none; margin-left: 0; }

}

jsfiddle: http://jsfiddle.net/U47K9/