고정 바닥 글이 제대로 작동하지 않음

저는 Ryan Fait의 끈끈한 바닥 글 example을 따라 갔으며 어떤 이유로 풋내기가 브라우저의 높이를 줄이면 나머지 div를 잘랐습니다. 누구나 이것이 왜 있는지, 나는 분명히 뭔가를 놓친다는 것을 알기 때문에, 나는 전에이 문제에 부딪치지 않았다.고정 바닥 글이 제대로 작동하지 않음

링크 : http://lithbeauty.com/test/ 당신은 당신의 수레를 삭제해야

출처

2011-12-09 realph

. .push 클래스에 clear:both을 추가하기 만하면됩니다. 또한 높이가 100 %를 초과하고 불필요한 스크롤을 만들기 때문에 래퍼의 위쪽 여백과 패딩을 제거해야합니다.

출처

2011-12-09 00:58:15 Luke

감사합니다. 내가 어떻게 그것을 놓쳤는지 모르겠다. – realph

#wrapper{ 
    position:relative; 
    height:auto; 
    min-height:100%; 
} 
#footer{ 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
}

출처

2011-12-09 12:07:42 Yusuf

나는 CSS 끈끈이 푸터 방식이 현혹적으로 단순하고 악몽이라는 사실을 발견했다. @ Yusef의 솔루션은 훨씬 간단합니다. 나는이 자바 스크립트 코드를 구현이의 변형을했다 :

function setFooter() 
{ 
    var footer = document.getElementById("footer"); 

    var innerWidth = window.innerWidth; 
    var offsetWidth = document.body.offsetWidth; 

    var scroll = innerWidth - offsetWidth; 

    if(scroll != 0) 
    { 
     footer.style.position = "relative"; 
    } 
    else 
    { 
     footer.style.bottom = 25 + "px"; 
    } 
}

만큼 바닥 글 DIV 자동으로 아래로 정렬됩니다 창에는 스크롤 이 없을 때 바닥 글에 대한 유세프의 CSS는, clear: both;을 포함로 기본 콘텐츠 div (또한 html body 태그에 onload = "setFooter();" 설정).

이 화면에 스크롤 막대 인 인 경우 스크롤 변수에 의해 계산 된 차이는 오버플로되는 정수 값이됩니다 (자세한 내용은 내 질문 참조 : Why are scrollTop, pageYOffset, and height all not working?).

wrapper, main-content 및 footer div를 구현하는 데 필요한 다음 동영상을 시청하십시오. http://www.youtube.com/watch?v=JnhoQ-aLfvE&src_vid=UpZbLIfHSMw&annotation_id=annotation_777473&feature=iv

출처

2012-04-12 02:49:28

고정 바닥 글이 제대로 작동하지 않음

답변

관련 문제