Jquery stickfooter issue

나는 알아낼 수 있었다. 문서 하단에 꼬리말을 붙이는 방법 : 즉, 문서가 뷰포트보다 < 인 경우 position : absolute를 jquery로 지정합니다. 그렇지 않으면 CSS와 함께 잘 작동합니다. 그러나 브라우저의 크기를 재조정하면 positing이 엉망이되어 문서 크기가 커집니다> viewport , 바닥 글은 문서로 넘칩니다. I 2012Jquery stickfooter issue

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

출처

2012-12-20 khurram

방금 발견 한 IE 브라우저의 문제입니다. 어떤 해결책이든지 – khurram

이 (순수 CSS)를 찾으십니까? http://ryanfait.com/sticky-footer/ –

@ Per Salbark jquery로 알아 낸 것 ... 최선의 선택은 희망입니다 ... 당신이 순수한 CSS를 더 잘 알지 못한다면 ??? 고마워요 – khurram

가 $(window).resize() 동일한 기능 부착뿐만 아니라 비주얼 스튜디오 MVC 4 ASP.net 사용하고

$(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-20 10:12:02

코드가 doc_height로 중단됨 khurram

@khurram 위의 코드를 사용하여 "code breaks"가 무엇입니까? –

doc_height khurram

답변

관련 문제