div以jquery height auto消失

Question

我是响应式网页设计的新手，我遇到了困难，我相信这将是一些愚蠢的原因，但我正在努力解决它。我有div body_main_wrapper和它的子divs Functions_Panel_Wrapper和Function_Page_Wrapper左浮动。父节点和子节点的高度是在运行时使用jQuery计算的。我想要的是当视口小于786时，子div显示100％宽度和自动高度。

我正在使用if if（viewport width＆lt; 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/

Answer 1

如果元素的唯一内容是浮动的，默认情况下它将占用0高度（只有非浮动的子项将扩展其容器的高度）。如果孩子的身高取决于父母的身高，他们的身高也会设为0。

#body_main_wrapper {
    *zoom: 1;
}

#body_main_wrapper:after {
    clear: both;
    content: " ";
    display: table;
}