기본 아이디어는

먼저 외부 레이어에 ID를 #container로 설정하여 높이가 브라우저 창의 높이가 되도록 컨테이너 div를 설정한 다음 #footer div를 #의 하위 div로 설정하는 것을 고려하는 것

원하는 효과를 얻기 위해 He가 #container의 하단 끝에 고정되도록 절대 위치 지정을 사용합니다.

사례 페이지 효과를 보려면 여기를 클릭하세요. 바닥글 부분의 효과를 보려면 브라우저의 높이와 너비를 변경하십시오.

코드 구현

: 먼저 HTML 구조를 고려하십시오. 이 데모 페이지의 HTML 코드는 매우 간단합니다.

body,html {
여백: 0;
패딩: 0;
글꼴: 12px/1.5 arial;
높이:100%;
}
#컨테이너 {
최소 높이:100%;
위치: 상대;
}
#콘텐츠 {
패딩: 10px;
패딩 하단: 60px;
/* 20px(글꼴 크기)x2(줄 높이) + 10px(패딩)x2=60px*/
}
#바닥글 {
위치: 절대;
하단: 0;
패딩: 10px 0;
배경색: #AAA;
너비: 100%;
}
#바닥글 h1 {
글꼴: 20px/2 Arial;
여백:0;
패딩:0 10px;
}
1: 먼저 html 및 body 요소의 높이(높이 속성)를 100%로 설정합니다(라인 5). 이렇게 하면 먼저 루트 요소의 높이가 전체 브라우저 창을 채우고 #container의 높이가 표시됩니다. 브라우저 창 전체를 채웁니다. html 요소와 body 요소를 동시에 설정하는 이유는 Firefox와 IE가 루트 요소를 서로 다르게 간주하기 때문이므로 여기서 설정합니다.

2: 그런 다음 #container의 높이를 100%로 설정합니다(8행). 그러나 여기에서는 일반적인 높이 속성 대신 "min-height" 속성이 사용된다는 점에 유의하세요. 콘텐츠가 증가하고 높이가 브라우저 창의 높이를 초과하는 경우 #container의 높이가 여전히 100%인 경우 #footer는 여전히 브라우저 창의 하단에 위치하므로 #content 콘텐츠를 덮습니다. min-height 속성을 사용하는 목적은 #container의 높이를 브라우저 창의 높이보다 "적어도" 늘리는 것입니다. 이것이 우리에게 필요한 효과입니다.

그러나 Firefox 및 IE7에서는 min-height 속성이 지원되는 반면 IE6에서는 min-height 속성이 지원되지 않습니다. 그러나 "동시에" IE6에서는 min-height 속성이 지원됩니다. 로 해석되지만 IE6에서 height 속성의 효과는 min-height가 원래 가지고 있어야 하는 효과입니다. 즉, IE6에서는 하위 div의 높이가 상위 div의 높이를 증가시킵니다. . 따라서 이는 IE6, IE7 및 Firefox에서 원하는 효과를 정확하게 얻을 수 있습니다.

3: 다음으로 #container를 상대 위치 지정(9행)으로 설정하여 내부에 있는 #footer의 위치 지정 참조로 만듭니다. 이는 소위 "가장 최근에 배치된 조상 요소"입니다.

4: 그런 다음 #foooter를 절대 위치 지정(라인 17)으로 설정하고 #container 하단(라인 18)에 붙여넣습니다.

5: 하지만 #container 하단에 #foooter를 붙여넣으면 실제로는 위의 #content div와 겹칠 것입니다. #content의 콘텐츠를 가리지 않기 위해 #contetn에서 패딩을 제거하여 설정합니다. 아래쪽에 padding-bottom 값을 #footer 높이(13행)와 동일하게 설정하면 #content의 텍스트를 피할 수 있습니다. 이 높이를 계산할 때 다음 계산 방법에 주의하세요. 코드의 주석(14행)