웹 페이지 바닥 글이 페이지 하단으로 확장되지 않음

Question

내 문제는 바닥 글이있는 웹 페이지가 있다는 것입니다. 전체 페이지를 채울 수있는 충분한 콘텐츠가 없으면 페이지에서 브라우저 창의 아래쪽으로 바닥 글을 확장하고 싶습니다. 또한 내용이 브라우저의 높이를 초과하고 세로 스크롤 막대가있을 때 페이지의 맨 아래로 바닥 글을 이동하고 싶습니다. http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

및 자습서가 특별히 내가 바닥 글 콘텐츠를 많이 긴 페이지에 " 을 want- 무슨 난데 :이 동작하지 않습니다 어떤 이유

, 나는이 페이지의 튜토리얼을 따라 눈에 잘 띄는 페이지를 맨 아래로 밀었습니다. 마치 정상적인 웹 사이트처럼 맨 아래로 스크롤 할 때 볼 수 있습니다. 즉, 바닥 글이 항상 귀중한 읽기 공간을 차지하지는 않습니다. "

튜토리얼을 따르면 페이지를 채울 수있는 내용이 충분하지 않을 때 페이지 바닥에 성공적으로 바닥 글을 넣을 수 있지만 충분한 콘텐츠가있을 경우 브라우저 창을 처음으로 끝내는 위치에 푸터가 중간에 배치됩니다 왜냐하면 몸체와 모든 컨테이너의 높이는 전체 페이지의 높이 (스크롤하는 페이지 높이)와 반대로 윈도우의 높이로 설정되기 때문입니다.

는

<div class="everything"> 
    <div class="main_content"></div> 
    <div class="template_footer"></div> 
</div> 

내 CSS 코드 : 나는 또한 높이와 아무것도 제대로 작동 서로 다른 변화의 무리를 시도했습니다

html, body { 
     margin:0; 
     padding:0; 
     height:100%; 
    } 
    .everything{ //main container 
     width:100%; 
     min-width:960px; 
     max-width:1450px; 
     margin-left:auto; 
     margin-right:auto; 
     min-height:100%; 
     position:relative; 
    } 
    .main_content{ //body container 
     width:100%; 
     position:relative; 
     float:left; 
    } 
    .template_footer{ 
     width:100%; 
     height:44px; 
     background-color:rgba(0, 0, 0, .5); 
     position:absolute; 
     bottom:0; 
    } 

, 내가 검색 한 다음

사업부 조직이다 다른 질문을 통해 그들은이 문제에 구체적으로 대답하지 않는 것 같습니다.

Answer 1

바닥 글은 .everything 컨테이너의 맨 아래에 절대 위치합니다. 내용에 관계없이 꼬리말은 컨테이너의 아래쪽 44 픽셀을 덮습니다.