1

私はなんとか理解できました。ドキュメントの下部にフッターを貼り付ける方法：つまり、ドキュメントがビューポートよりも小さい場合は、position：absoluteをjqueryで呼び出します。それ以外の場合は相対的であり、cssと一緒に正常に機能しますが、ブラウザのサイズを変更すると、ポジショニングが台無しになり、ドキュメントサイズ>ビューポートの場合、フッターがドキュメントで溢れています。

VisualStudio2012でMVC4でASP.netを使用しています

<!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 に答える