상자 크기 조정을 사용하여 div 모방 프레임 구현

저자：Eve Cole 업데이트 시간：2009-12-07 16:08:04

[ 테스트에 참여한 브라우저 : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[ 운영체제 : 윈도우 ]

먼저 코드를 살펴보겠습니다.

코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="홈" />
<title>상자 크기 조정을 사용하여 div 모방 프레임 구현</title>
<스타일 유형="텍스트/css">
* {여백:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 패딩:100px 0;
HTML,본체 { 높이:100%;}
.top { 위치:상대; 여백:-100px 배경:#f60;}
.side { 위치:상대적; 높이:#fc0; 오버플로:자동; 너비:200px; 여백-오른쪽:-3px;
.main { 위치:상대적; 오버플로:자동; 배경:#f30;}
.bottom { 위치:상대적; 높이:100px; 지우기:모두;}
</style>
</head>
<본문>
<div 클래스="맨 위">
맨 위
</div>
<div 클래스="사이드">
옆
 
 
 
 
 
 
</div>
<div 클래스="메인">
기본
 
 
 
 
 
 
</div>
<div 클래스="하단">
맨 아래
</div>
</body>
</html>

[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

주요 부분 :

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 패딩:100px 0;

원칙은 아마도 이렇습니다 .

천 마디 말은 사진 한 장의 가치도 없습니다. 성형 전후 비교를 통해 누구나 박스 사이즈:보더 박스의 효과를 볼 수 있을 것입니다.

박스 크기 조정을 이해하는 학생들은 이것이 Weiguo와는 거리가 먼 CSS3 세계에서 왔기 때문에 IE6/IE7은 지원되지 않는다는 것을 알아야 합니다. 그러나 저는 매우 책임감이 있으며 이 데모는 일반적으로 IE6/IE7과 호환됩니다.

왜냐면...

IE6/IE7에서는 <html>의 기본 상자 크기 값이 border-box입니다. 이 데모).

이제 문제

는

이 방법을 사용할지 여부입니다. 장점과 단점을 비교하고 스스로 결정할 수 있습니다.

현재 이 방법은

기본적으로 각 브라우저에 대해

두 가지 주요 이점이 있습니다

같은 방법으로 CSS 코드는 간단하고 수정하기 쉽고 이해하기 쉽습니다.
호환 가능. OP10에 절대 위치 지정 방법이 존재하는데, 현재 버그를 수정할 방법이 없어 우회해야 합니다.

가장 큰 단점은 유연성이 없다는 점입니다. IE6가 없었다면 절대 위치 지정 방법을 선택했을 것 같습니다.

다음은 적용 예시 데모입니다.

코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="홈" />
<title>상자 크기 조정을 사용하여 div 모방 프레임 구현</title>
<스타일 유형="텍스트/css">
* {여백:0;}
html { -webkit-box-sizing:border-box; 상자 크기:border-box; 위치:상대적;
HTML,본체 { 높이:100%;}
.top { 위치:상대; 여백:-100px 배경:#f60;}
.side { 위치:상대적; 높이:#fc0; 오버플로:자동; 너비:200px; 여백-오른쪽:-3px;
.main { 위치:상대; 높이:100%; 여백-상단:-100px; 여백-왼쪽:0; Z-색인:2;}
.main iframe { 높이:100%; 너비:100%; 배경:#fff; 왼쪽:0;
.bottom { 위치:상대적; 높이:100px; 지우기:모두;}
</style>
</head>
<본문>
<div 클래스="맨 위">
맨 위
</div>
<div 클래스="사이드">
옆
 
 
 
 
 
 
</div>
<div 클래스="메인">
<iframe 프레임border="0" src=" http://www.g.cn/"></iframe >
 
 
 
 
 
 
</div>
<div 클래스="하단">
맨 아래
</div>
</body>
</html>

[Ctrl+A 모든 선택 팁: 먼저 코드의 일부를 수정한 다음 실행을 누를 수 있습니다.]

주의해야 할 문제 :

본문에 Overflow:hidden을 지정하지 마십시오. 본문 외부의 내용은 무자비하게 숨겨집니다. 상단/하단(머리글/바닥글)을 포함한 것;

이해해야 할 중요한 사항 :

[100%+(N)px] 높이를 생성하는 방법: div { height:100%; )px;} .