용기 높이 100%의 절대 포 지 셔 닝 레이아웃

용기 의 높이 는 100%자주 사용 되 는 수요 이 며,어떤 용기 도 실현 할 수 있 으 며,끼 워 넣 을 필요 가 없다.
body 를 하나의 용기 로 보고 내부 대상 의 상층 라벨 로 하 며 그의 높이 를 100%로 설정 하 는 것 이 관건 이다.
가장 기본 적 인 예
* { margin:0; padding:0; border:0;}html,body { height:100%;} /* 동시에 html 를 설정 하 는 것 은 FF*/\#box 를 호 환 하기 위해 서 입 니 다.2 { height:100%; background:#000;}
중첩 포 지 셔 닝 효과
#box_1 { position:absolute; top:0; left:0; width:100%; height:50px; background:#f00; z-index:2;}#box_2 { position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:1;}
수직 상대 고도 효과
#box_1 { position:absolute; top:0; left:0; width:100%; height:30%; background:#f00; z-index:2;}#box_2 { position:absolute; left:0; top:30%; width:100%; height:70%; background:#000; z-index:1;}
가로 상대 너비 효과
#box_1 { position:absolute; top:0; left:0; width:30%; height:100%; background:#f00; z-index:2;}#box_2 { position:absolute; top:0; right:0; width:70%; height:100%; background:#000; z-index:1;}
이런 구 조 는 float 가 필요 없고 많은 변화 가 있 을 수 있다.
1,N 열 레이아웃 2,N 줄 레이아웃 3,N 열 더하기 N 줄 교차 레이아웃
주의해 야 할 것 은 FF 아래 에서 상대 크기 용기 페이지 를 탐색 할 때 창 크기 를 조정 하 는 동시에 용기 크기 를 실시 간 으로 조정 하 는데 IE 는 창 조정 이 끝 난 후에 만 효과 가 나타 납 니 다.
IE 5.0/IE 5.5/IE 6.0 과 FF 1.5 테스트 통과