Jquery stickfooter问题_Jquery_Css_Asp.net Mvc_Sticky Footer

Jquery stickfooter问题

jquery css asp.net-mvc

Jquery stickfooter问题,jquery,css,asp.net-mvc,sticky-footer,Jquery,Css,Asp.net Mvc,Sticky Footer,我已经设法弄明白了；如何将页脚粘贴在文档底部：即，当文档视口，页脚会溢出文档我正在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>

我已经设法弄明白了；如何将页脚粘贴在文档底部：即，当文档<视口时，我在jquery中调用position:absolute，否则称为relative，这与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>

将相同的函数附加到

$（窗口）。resize（）

以及

$（文档）。ready（）

$（窗口）。load（）

：

我刚发现IE浏览器有问题。。你在寻找这样的解决方案（纯css）吗@根据Salbark的说法，我刚刚用jquery解决了。。。我希望这是最好的选择。。。除非你知道一些更纯粹的css？？？谢谢，我发布的链接是一个粘性的页脚。适用于所有浏览器，无JavaScript。我一直使用它。代码在DojyHealth

<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%;}

//$(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);
};