我已经弄明白了；如何在文档底部粘贴页脚:即当文档 < 比视口(viewport)我调用 position:absolute 在 jquery 中，否则 relative 可以与 css 一起正常工作但是当我重新调整浏览器大小时它会弄乱定位，如果文档大小 > 视口(viewport)，页脚溢出文档。
我在 visual studio 2012 中使用 ASP.net 和 MVC 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="container">
<div id="header">
my header
</div>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<div id="footer">
my footer
</div>
<script type="text/javascript">
$(window).bind('load', function () {
//$(document).ready(function(){
var doc_height = $(document).height();
var viewport_height = $(window).height();
if (doc_height > viewport_height) {
$("#footer").css({ position: "relative" });
}
else {
$("#footer").css({ position: "absolute" });
}
alert("doc " + doc_height + " viewport " + viewport_height);
});
html, body
{
margin:0;
padding:0;
height:100%; }
#container {
min-height:100%;
position:relative;}
#header {
background:#ff0;
padding:10px;}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
background-color:red;}
#footer {
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
margin-bottom: 0;}
#container {
height:100%;}
最佳答案
将相同的函数附加到 $(window).resize() 以及 $(document).ready()/$(window)。加载():
//$(document).ready(resizeHandler);
$(window).load(resizeHandler).resize(resizeHandler);
var resizeHandler = function() {
var doc_height = $(document).height();
var viewport_height = $(window).height();
if (doc_height > viewport_height) {
$("#footer").css({ position: "relative" });
}
else {
$("#footer").css({ position: "absolute" });
}
//alert("doc " + doc_height + " viewport " + viewport_height);
};
关于Jquery stickfooter 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13969696/