I recently started exploring responsive web design and encountered an issue. I believe it might be something small, but I'm having trouble resolving it. I have a div called body_main_wrapper with child divs Functions_Panel_Wrapper and Function_Page_Wrapper floating to the left. The height of these parent and child divs is calculated at runtime using jQuery. My goal is that when the viewport width is less than 786 pixels, the child divs should appear with 100% width and auto height.
Although I attempted to set the height to ("auto") using else if (viewport width < 786), my child div disappears...
jQuery plugin
(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>© @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/