고정 바닥 글 + 고정 폭 + 배경색

Question

맨 아래에 바닥 글과 관련하여 많은 질문이 있지만이 경우 해결 방법을 찾을 수 없습니다.

footer at bottom http://www.cucuza.com/gustavo/footer2.jpg

내가 컨텐츠 사업부는 바닥 글의 위쪽 가장자리에 맞게 확장하려는 :

나는이 시나리오를 가지고있다.

페이지 꼬리가 뷰포트보다 작 으면 바닥 글이 뷰포트 하단에 있어야하고 페이지 높이가 뷰포트보다 길면 바닥 글이 머무르며 페이지 하단

이이 live demo입니다 : 내가 질문을 작성하는 동안

Answer 1

, 나는 해결책을 알아 냈어.

footer at bottom http://www.cucuza.com/gustavo/footer3.jpg

이 코드입니다 :

HTML :

<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="content">Content</div> 
    <div id="footer">Footer</div> 
</div> 

CSS :

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
    background:#ccc; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
    width: 500px; 
    margin: 0 auto; 
    background:#fff; 
} 
#header { 
    background:#5ee; 
} 
#content { 
    padding-bottom:80px; 
    min-height:100%; 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
} 

작동 원리 :

• 높이 덕분에 HTML 및 본문이 계속 확장됩니다. 100 %
• #wrapper의 최소 높이 속성은 전체 높이로 확장 된 상태로 유지되고 내용이 100 %를 초과하면 # 래퍼가 브라우저를 넘어 확장됩니다 캔버스 (스크롤).
• # 래퍼는 상대 위치를 가지므로 #footer의 절대 하단 위치는 항상 바닥 글을 # 래퍼 하단에 유지합니다.
• #footer 높이와 동일한 값을 갖는 #content 패딩 하단 속성은 #footer 및 #content overlapping을 방지합니다. #footer는 항상 #wrappper의 하단을 덮고 #content를 커버하므로 #content 하나는 # 래퍼의 맨 아래에 도달합니다. #wrapper에이 속성을 넣을 수 없습니다. 높이가 100 % (100 % + 패딩)보다 커지고 #footer가 화면 밖으로 떨어지기 때문입니다.
• #content가 아니라 #wrapper는 항상 완전히 확장 된 배경색 속성이므로 배경색 속성을가집니다.