Verwenden Sie die Boxgröße, um einen Div-Imitationsrahmen zu implementieren

Autor：Eve Cole Aktualisierungszeit：2009-12-07 16:08:04

[ Am Test teilnehmende Browser : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2]
[ Betriebssystem : Windows]

Schauen wir uns zunächst den Code an:

Codefeld ausführen
<!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 ">
<Kopf>
<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="Home" />
<title>Verwendung der Boxgröße zur Implementierung eines Div-Imitationsrahmens</title>
<style type="text/css">
* { margin:0; padding:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
html,body { height:100%;}
.top { position:relative; margin-top:-100px; height:100px;}
.side { position:relative;background:#fc0;width:left:-3px;
.main { position:relative; overflow:auto; height:100%;}
.bottom { position:relative; height:100px; background:#f60;}
</style>
</head>
<Körper>
<div class="top">
Spitze
</div>
<div class="side">
Seite
 
 
 
 
 
 
</div>
<div class="main">
hauptsächlich
 
 
 
 
 
 
</div>
<div class="bottom">
unten
</div>
</body>
</html>

[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Schlüsselteile :

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

Das Prinzip ist wohl folgendes :

Durch den Vergleich vor und nach einer plastischen Operation sollte jeder die Wirkung von box-sizing:border-box erkennen können.

Studenten, die sich mit Box-Sizing auskennen, sollten wissen, dass es aus der CSS3-Welt stammt, die weit von Weiguo entfernt ist, sodass IE6/IE7 nicht unterstützt wird, aber ich bin sehr verantwortungsbewusst und sage: Diese Demo ist normalerweise mit IE6/IE7 kompatibel.

Denn ...

unter IE6/IE7 ist der Standardwert für die Boxgröße von <html> border-box (Hinweis: IE7 ist etwas abnormal und das Bewusstsein hat sich nach dem Überlauf wiederhergestellt: versteckt, was den normalen Betrieb von nicht beeinträchtigt diese Demo). ,

Die Frage ist nun, ob Sie diese Methode verwenden sollten, und Sie können selbst entscheiden:

Es ist besser, die absolute Positionierungsmethode zu verwenden:

Grundsätzlich für jeden Browser Mit der gleichen Methode ist der CSS-Code einfach, leicht zu ändern und leicht zu verstehen.
kompatibel. Die absolute Positionierungsmethode existiert unter OP10. Da es derzeit keine Möglichkeit gibt, den Fehler zu beheben, muss ich einen Umweg machen.

Sein größter Nachteil ist, dass es unflexibel ist. Wenn es keinen IE6 gäbe, würde ich definitiv die absolute Positionierungsmethode wählen.

Im Folgenden finden Sie eine Anwendungsbeispieldemo.

Codefeld ausführen
<!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 ">
<Kopf>
<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="Home" />
<title>Verwendung der Boxgröße zur Implementierung eines Div-Imitationsrahmens</title>
<style type="text/css">
* { margin:0; padding:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box padding:100px 0;
html,body { height:100%;}
.top { position:relative; margin-top:-100px; height:100px;}
.side { position:relative;background:#fc0;width:left:-3px;
.main { position:relative; height:100%; margin-top:-100px; z-index:2;}
.main iframe { height:100%; width:100%; background:#fff;
.bottom { position:relative; height:100px; background:#f60;}
</style>
</head>
<Körper>
<div class="top">
Spitze
</div>
<div class="side">
Seite
 
 
 
 
 
 
</div>
<div class="main">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
 
 
 
 
 
 
</div>
<div class="bottom">
unten
</div>
</body>
</html>

[Strg+A Alle Auswahltipps: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Ein Problem, das beachtet werden sollte :

Geben Sie nicht overflow:hidden an den Körper an, da sonst alles außerhalb davon rücksichtslos ausgeblendet wird Dinge, einschließlich oben/unten (Kopf-/Fußzeile);

ein wichtiger Punkt, der verstanden werden sollte :

Die Methode zum Generieren der Höhe von [100 %+(N)px]: div { height:100%; )px;} .