늘이기 바닥 글

Question

어떻게하면 내용 바로 뒤에 꼬리말 컨테이너가오고 페이지의 맨 아래까지 늘어 납니까?

셋업은 다음

• 헤더 용기
• 푸터 컨테이너는 페이지의 나머지 뻗어 다음 내부 함유량이 있어야 뭐든 150 픽셀 높이
• 콘텐츠 컨테이너 뻗어 고정된다.

는 지금까지 중 하나는

Answer 1

가 실제 스타일링에 따라 달라질 수 있습니다 공백 내용은 다음과 직접 후 바닥 글, 또는 내용과 바닥 글 사이의 공백과 함께 바닥에 붙어 바닥 글이 당신 여부 귀하의 페이지가 절대로 스크롤 할 수 없을만큼 길어질 것입니다. 이 트릭에는 본체 태그 자체를 사용할 수 있지만 유연성이 떨어지며 권장되지 않습니다.

아이디어는 아주 긴 바닥 글 div를 만들고 나머지 콘텐츠가 포함 된 요소에 포함시키는 것입니다. 부모 오버 플로우가 숨겨져 있기 때문에 div의 실제 길이는 무시됩니다.

이것은 종종 카운터 밸런싱 바텀 패딩으로 표시되지만, 필요하지 않아야합니다.

<style> 
    html,body,.bigDiv{height:100%} 
    .header{height:150px} 
    .footer{height:2000px; background-color:green;} 
</style> 

<div class="bigDiv" style="overflow:hidden;"> 

    <div class="header"></div> 
    <div class="content"> 
     Content 
    </div> 
    <div class="footer"> 
     Footer 
    </div> 
</div>