div随着jquery height auto消失答案

【问题标题】：div disappers with jquery height autodiv随着jquery height auto消失
【发布时间】：2013-12-03 12:10:08
【问题描述】：

我是响应式网页设计的新手，我被卡住了，我相信这会是一些愚蠢的原因，但我正在努力解决它。我有 div body_main_wrapper，它的子 div Functions_Panel_Wrapper 和 Function_Page_Wrapper 向左浮动。父子 div 的高度在运行时使用 jQuery 计算。当视口小于 786 时，我想要什么，子 div 以 100% 的宽度和自动高度显示。

我正在使用 else if (viewport width

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/

【问题讨论】：

我不明白什么正在消失？在小提琴上，注意到正在消失。其他事情：为什么你使用 jquery，你的页眉和页脚似乎都有静态高度，所以不需要 js？

标签： jquery css html jquery-plugins responsive-design

【解决方案1】：

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

#body_main_wrapper {
    *zoom: 1;
}

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

【讨论】：