컨테이너 높이가 100%인 절대 위치 지정 레이아웃_CSS/HTML

컨테이너 높이 100%는 자주 사용되는 요구 사항으로, 모든 컨테이너에서 달성할 수 있으며 중첩 관계가 필요하지 않습니다.

본체를 컨테이너로 생각하고 높이를 100%로 설정하는 것이 중요합니다.

가장 기본적인 예

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* FF 호환성을 위해 html도 설정합니다. */
#box_2 { 높이:100%; 배경:#000;}

중복 포지셔닝 효과

#box_1 { 위치:절대:0; 너비:100%; 배경:#f00:2;}
#box_2 절대; 왼쪽:0; 너비:100%; 배경:#000;}

수직 상대 높이 효과

#box_1 { 위치:절대:0; 너비:100%; 배경:#f00;}
#box_2; 왼쪽:0:30%; 높이:70%; z-색인:1;}

수평 상대 폭 효과

#box_1 { 위치:절대:0; 너비:30%; 배경:#f00;}
#box_2; 위쪽:0; 오른쪽:0; 높이:100%; z-색인:1;}

이 레이아웃에는 부동 소수점이 필요하지 않으며 다양한 변형이 있습니다.

1, N열 레이아웃
2, N행 레이아웃
3, N열 + N행 교차 레이아웃

FF에서 상대 크기 컨테이너 페이지를 탐색할 때 창 크기가 조정되면 컨테이너 크기가 실시간으로 조정되는 반면, IE는 창이 조정된 후에만 적용된다는 점에 주목할 가치가 있습니다.

IE5.0/IE5.5/IE6.0 및 FF1.5 테스트 통과