스티커 바닥 글이 올바르게 작동하지 않습니다.

Question

이 예제에서 만든 것과 같은 끈적 인 바닥 글을 만들고 싶습니다. http://codepen.io/Kenny94/pen/JvtFs

html, body { 
     height: 100%; 
     width:100%; 
     padding: 0; 
     margin: 0; 
     position: relative; 
    } 

    div { 
     font-size: 30px; 
     min-height:100%; 
     margin-bottom:60px; 
     background: red; 
    } 

    footer { 
     background:green; 
     height: 60px; 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     Right: 0; 
     z-index: -1; 
    } 

문제는 내 현재 프로젝트에서 마우스 오른쪽 버튼을 작동하지 않는 것입니다. 그것은 몸 뒤에 바닥 글을 설정하지만 스크롤을 시작하면 나타납니다. 크롬에서 몸체의 크기를 보면 높이가 970px이지만 게시물 때문에 전체 사이트가 훨씬 더 커집니다. Blog Post Wrapper와 같이 몸이 확장되지 않은 것처럼 보입니다. 본체의 BG-Color를 회색으로 설정하면 전체 페이지가 채워집니다. 나는 왜 그것이 높이 100 %로 작동하지 않는지 전혀 모른다. 콘텐츠와 그 밖의 모든 것에 적합하도록 높이를 4000px로 설정할 수 있지만 실제 해결책은 아닙니다.

Answer 1

html 태그 또는 body 태그에 높이를 설정할 필요가 없습니다. 그것은 내용과 함께 흐를 것입니다. 메인 div의 최소 높이를 100 %로 설정합니다. 뷰가로드되어 화면에서 푸터를 밀 때 남은 공간의 나머지 부분을 차지합니다. 기본 div의 높이를 변경하거나 바닥 글이 화면 하단에 달라 붙지 않도록하려면 바닥 글 위치를 화면 하단에 고정 시키십시오.

Answer 2

나는 당신이 성취하려는 것을 정확히 모르겠습니다. 당신은 그래서 수정이 될 것 z-index to -1. 을 설정하기 때문에

바닥 글이 몸 뒤에 놓여 왜 당신이 궁금 - 만약, 그것은 : 당신이 스크롤 할 때 표시하고 싶지 않아요 - 만약 http://jsfiddle.net/bmpy6/

(말하자면, 언제나 아래쪽에 고정시켜야합니다.) 이것은 여러분이 원하는 것이어야합니다 : http://jsfiddle.net/bmpy6/1/

왜냐하면 position: fixed;을 생략하기 때문입니다.

Answer 3

변경 :

footer { 
     background:green; 
     height: 60px; 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     Right: 0; 
     z-index: -1; 
    } 

사람 :

footer { 
     background:green; 
     height: 60px; 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     Right: 0; 
     z-index: 1; 
    } 

그냥 전면에 바닥 글을 가져올 것이다 Z- 인덱스를 변경. Z- 색인은 기본적으로 ID 및 클래스의 가시성 측면에서 우선 순위를 제공한다는 것을 기억하십시오.

Answer 4

높이를 전혀 설정할 필요가 없습니다. 이 시도 : 대신

div { 
    font-size: 30px; 
    margin-bottom:60px; 
    background: red; 
    } 

을 :

div { 
     font-size: 30px; 
     min-height:100%; 
     margin-bottom:60px; 
     background: red; 
    } 

당신은 100 %의 높이가 페이지를 말할 때, 당신이 화면 높이의 100 %를 채울 말하고있다, 참조하십시오. 높이를 제거하면 (이 경우 최소 높이이므로 필요에 따라 확장됩니다) <div> 콘텐츠를 유지하는 데 필요한 높이로 펼칩니다.
See this JSFiddle for a working example
희망이 있습니다.