바닥 글이 바닥에 붙지 않는다

나는 jsp 페이지를 다루고있다. 문제가 하나 발생한다. 페이지 내용이 내용 아래에 푸터가 더 적을 때, 이것은 매우 나 빠진다. 페이지보다 자동으로 바닥에 떠 있습니다. 이것은 나에게 좋습니다. 어떤 도움 페이지 하단에 상관없이 페이지의 높이에 항상 끈적 끈적한 바닥 글 (들어바닥 글이 바닥에 붙지 않는다

#footer { 
    height:41px; 
    background:url(../images/main-bg.png) repeat-x; 
    width: 100%; 
}

출처

2012-12-31 Aniket

당신이 바닥 글 끈적하게 할 수 있습니다 : 같은 뭔가 잘해야이 튜토리얼 http://ryanfait.com/resources/ 참조 footer-stick-to-page/ –

...

이 는 CSS에서 바닥 글에 사용되는 코드는

... 이해할 수있을 것이다 당신이 다음 position:fixed 할 것 스크롤에 의해 영향을받지 않는 브라우저 창에서 항상 볼 수 있도록 바닥 글을 찾는 경우), position: fixed;

#footer { 
    height:41px; 
    background:url(../images/main-bg.png) repeat-x; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    }

출처

2012-12-31 07:46:52

나는 이미 위치를 사용했습니다 : fixed 그러나 이것을 사용하는 문제는 아래의 대답에서 설명합니다 ... – Aniket

그 문제는 쉽게 해결할 수 있습니다 : 메인 컨텐츠의 여백을 설정하십시오 , 바닥 글의 동일한 높이의);) BTW 나는 밖으로 바닥 글을 이동합니다, 그것은 청소기. –

#footer { \t 신장 : 41px; 배경 : url (../ images/main-bg.png) repeat-x; 직위 : 절대; \t 여백 - 하단 : 41px; \t 너비 : 100 %; }이 솔루션에 대한 내 첫 번째 문제는 해결되었지만 내용이 적어 한 줄만 인쇄하려는 경우 바닥 글은 모든 솔루션 바로 아래에 있습니다. – Aniket

를 사용합니다. 그러나 내용이 많을 때 스크롤이 필요하고 내용이 겹치는보기 영역에 계속 머무는 것이 좋지 않을 것입니다. 깨끗한 솔루션은 래퍼 div 밖으로 바닥 글 마크 업을 이동하는 것입니다. ..

SAMPLE DEMO

CSS-

html, body { 
    height: 100%; 
} 
#wrapper { 
    background-color:yellow; 
    height: 90%; //sharing the height between wrapper and footer 
    margin:0px; 
} 
#footer { 
    background-color:green; 
    height: 10%; 
    min-height:20px; 
    max-height:40px; 
}

출처

2012-12-31 08:40:48 Cdeez

바닥 글이 바닥에 붙지 않는다

답변

관련 문제