我正在使用ASP.NET MVC 5中的响应式网页设计。我的仪表板有标题，中间正文和页脚。我想要每个定义高度的页眉和页脚，仪表板占据中间部分，这意味着用户不会得分或者降低。我已经创建了javaScript和jQuery插件，我在调整大小和加载页面的插件，如果view-port的高度小于786（小于ipad肖像大小），那么将stickyfooter类添加到footer div其他删除类，哪个工作很好，只有当我将尺寸从787增加到更大时才会发出，它会移除粘性脚，但它会在页脚和仪表板中间体之间留下间隙......我不是如何解决这个问题。我猜css清除了两者，但弄清楚如何！
其次我注意到当我重新加载页面时它很好，就在我调整视口大小时
(function ($) {
$.fn.stickyFooter = function () {
$(window).bind('load resize', function () {
var viewport_height = $(window).height();
var footerHeight = $('.footer_wrapper').height();
var viewport_width = $(window).width();
var footerTop = $('.footer_wrapper').position().top + footerHeight;
var Wrapper_Height = (viewport_height - ($(".footer_wrapper").height()) - ($(".navbar-header").height()));
if(viewport_width < 768)
{
if (footerTop < viewport_height) {
$('.footer_wrapper').addClass("stickyFooter").css('margin-top', 10 + (viewport_height - footerTop) + 'px');
}
$(".navbar-toggle").click(function () {
if (footerTop < viewport_height) {
$('.footer_wrapper').addClass("stickyFooter").css('margin-top', 10 + (viewport_height - footerTop) + 'px');
}
});
$(".Functions_Panel_Wrapper").height("auto");
$(".Function_Page_Wrapper").height("auto");
}
else if(viewport_width > 767)
{
if ($('.footer_wrapper').hasClass("stickyFooter"))
{
$('.footer_wrapper').removeClass("stickyFooter")
}
//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");
}
});
};
})(jQuery);
<body>
<!--*************************** Header ***********************************-->
<div class="navbar navbar-inverse navbar-static-top header_wrapper">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("London College Of Music", "Home", "Dashboard", null, new { @class = "navbar-brand" })
<!--<a href="@Url.Action("Home", "Dashboard")" class="logo"></a>-->
<!-- <a class="navbar-brand logo-nav" href="#"><img src="~/ImagesAndIcons/Images/LCM.jpg" style="max-width:30%;height:auto;" /></a>-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!--<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>-->
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div> <!--end header-->
<div class="body-content">
<!--*************************** Main Body ***********************************-->
<div id="body_main_wrapper">
<!--Functions Panel Wrapper (left-side)-->
<div class="Functions_Panel_Wrapper">
functions lists.....
</div>
<!--Functions Page Wrapper (right-side)-->
<div class="Function_Page_Wrapper">
@RenderBody()
</div> <!--end Function_Page_Wrapper-->
</div> <!--end body_main_wrapper-->
<!--*************************** Footer ***********************************-->
<!-- <div class="footer_wrapper navbar navbar-default navbar-fixed-bottom">-->
<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-->
html, body{
margin:0px;
padding:0px;
}
#body_main_wrapper{
display:table;
width:100%;
margin-top:0;
background-color:grey;
}
.body-content{
margin-top:-20px;
}
.Functions_Panel_Wrapper{
width:20%;
float:left;
background-color:red;
}
.Function_Page_Wrapper{
width:79%;
float:left;
margin-left:1%;
background-color:pink;
}
.footer_wrapper {
width:100%;
min-height:80px;
left:0;
background-color:green;
}