Sticky Footer CSS가 작동하지 않습니다.

stackoverflow 및 다른 사이트에서 여러 주제를 살펴 보았지만 제안 된 해결책 중 어느 것도 저에게 효과적이지 않습니다.Sticky Footer CSS가 작동하지 않습니다.

문제는 내가 시도한 것에 관계없이 컨테이너 (래퍼) div의 위쪽에있는 패딩과 동일한 높이의 페이지에 스크롤 막대가 여전히 추가되어 있다는 것입니다. 나는 컨테이너 div의 최소 높이를 만지작 거리며 작업 할 수 있습니다. 분명히 항상 작동하지는 않을뿐만 아니라, 처리하기가 정말 엉성한 방법입니다. 여기에 코드가 있습니다.

HTML :

<body> 
<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div> 
<div id="footer"></div> 
</body>

(I이 같은 결과로, 내부와 외부 바닥 글을 시도했습니다.)

가 여기에 관련 CSS의 :

html, body { 
    height: 100%; 
} 

body > #container { 
    height: auto; 
    min-height: 100%; 
} 


#content { 
    height: 100%; 
    position: relative; 
} 

body { 
    margin: 0; 
    padding: 0; 
    color: #FFF; 
    background: /*image here*/; 
    background-size: cover; 
    overflow: auto; 
} 

#container { 
    width: 100%; 
    padding-top: 50px; 
    position: relative; 
} 

#header { 
    background: /*image here*/; 
    height: 130px; 
    box-shadow: 4px 2px 5px #000; 

    border-top: 2px solid #F8F8F8; 
    border-bottom: 2px solid #F8F8F8; 

    overflow: hidden; 
} 

#footer { 
    position: relative; 
    z-index: 10; 
    height: 3em; 
    margin-top: -3em; 
    background-color: #FFF; 
    clear: both; 
}

이있을 수있는 몇 가지 이상하게 넘쳤지 만, 문제를 해결하기 위해 다른 지점에서 던져 버렸습니다. 나는 사이트의 전체 배경을 커버하는 배경 이미지와 헤더의 배경 이미지를 사용한다.

오버플로, 높이, 여백/안쪽 여백 또는 상대/절대/고정 위치 지정을 사용하면 성능이 떨어지거나 동일한 결과가 나타납니다.

JS가 없으면이 작업을 수행하려고하지만 다른 모든 작업이 실패하는 경우이를 해결할 의향이 있습니다. 그렇다면 누구나 관련 JS 스택 오버 플로우 질문 및/또는 자습서를 가르쳐 주시겠습니까?

미리 조언 해 주셔서 감사합니다.

출처

2013-07-09 Lapys

. 트위터 부트 스트랩에 의존하기 때문에 공유 할 좋은 코드가 없습니다. – Rake36

약간의 도움이 될 수 있습니다 http://jsfiddle.net/ekn9v/ – jeff

감사합니다, 제프! 아래 답변도 효과가 있었지만 강제로 추가 콘텐츠 래퍼를 추가해야했습니다. 나는 너의 것뿐만 아니라 총을 줄 것이지만 그것이 또한 작동해야하는 것처럼 보인다! : D – Lapys

당신이 이것을하려고하는 브라우저를 제공하지 않았지만 현대적인 브라우저라고 가정하면 cleanstickyfooter 기술이 가장 잘 작동한다는 것을 발견했습니다. (이 기술에 대한 Trevor Sheridan에 대한 모든 공헌) 구현을 볼 수 있도록 예제 here on JSFiddle을 만들었습니다. 필요에 따라 너비 등을 조정할 수 있습니다. 첫 번째 링크는 훌륭한 세부 정보를 많이 제공합니다.

당은 SO 요구 사항은, 여기에 HTML입니다 :

<body> 
    <div id="wrapper"> 
     <div id="content_wrapper"> 
      <div id="content_inner_wrapper"> 
       <div>Site content will be contained here.</div> 
      </div> 
     </div> 
    </div> 
    <div id="footer_wrapper"> 
     <div id="footer_inner_wrapper"> 
      <div>The footer's content</div> 
     </div> 
    </div> 
</body>

및 CSS : 나는 '고정'위치 및 상자 레이아웃에 의존하는 정말 좋은 솔루션을 발견했습니다

html, body { 
    height: 100%; 
} 
body { 
    margin: 0px; 
    padding: 0px; 
} 
div#wrapper { 
    width: 100%; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0px 0px -41px 0px; 
} 
div#footer_wrapper { 
    width: 100%; 
    height: 41px; 
    background-color: red; 
} 
div#content_wrapper { 
    width: 100%; 
    padding: 0px 0px 41px 0px; 
} 
div#footer_wrapper, div#content_wrapper { 
    min-width: 500px; 
} 
div#footer_inner_wrapper, div#content_inner_wrapper { 
    width: 500px; 
}

출처

2013-07-09 20:46:48 JasCav

이것은 정말 잘 작동 하나 문제가 하나 있습니다. 화면 상단에 내 패딩 (페이지 상단과 헤더 사이의 50 픽셀 간격)을 어떻게 만들 수 있으며 바닥 글을 가질 수 있습니까? 갭이 추가 된 경우 (그리고 여백과 안쪽 여백을 모두 시도한 경우) 스크롤바에 동일한 문제가 발생합니다. 편집 : 콘텐츠 주위에 단 하나의 래퍼 만 가지고 도망 치려고했습니다. 컨테이너 내에서 내용 래퍼를 추가 한 다음 컨테이너가 아닌 내용 래퍼에 패딩을 추가하면 크기를 조정할 때도 완전히 작동합니다. 감사합니다. 추신 : 왜 정확히 작동합니까? – Lapys

Sticky Footer CSS가 작동하지 않습니다.

답변

관련 문제