1

我设法弄清楚了；如何在文档底部粘贴页脚：即当文档<而不是视口时，我在 jquery 中调用位置：绝对，否则相对于 css 可以正常工作，但是当我重新调整浏览器大小时，它会弄乱定位，如果文档大小 > 视口，页脚溢出文档。

我在 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%;}
4

1 回答 1

0

将相同的功能附加$(window).resize()到$(document).ready()/ $(window).load()：

//$(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);
};
于 2012-12-20T10:12:02.807 回答