Die ultimative Methode für CSS-Layout mit adaptiver Höhe

Dieser Artikel stellt hauptsächlich die ultimative Methode zur adaptiven CSS-Layouthöhe vor. Jetzt kann ich sie mit allen Freunden teilen, die sie brauchen.

Das ultimative Ziel unseres Schriftsatzes Um das Programm zu erstellen, können Benutzer schnell eine Bindung herstellen, und die endgültigen realen Daten können mit den Renderings übereinstimmen. Allerdings stoßen wir bei chinesisch geformten Seiten häufig auf unsichere Höhen der linken und rechten Spalten, sodass wir uns an die beiden Spalten anpassen müssen. Bitte sehen Sie sich die Lösung an

Die Höhe jeder Säule (die Höhe dieser Säule kann nicht im Voraus bestimmt werden) ist das Ziel, das jeder Designer verfolgt. Gemäß der allgemeinen Praxis verwenden die meisten von ihnen die Füllmethode das Hintergrundbild und das Hinzufügen eines JS-Skripts, um die Spaltenhöhen gleich zu machen. In diesem Artikel wird das Problem der gleichen Spaltenhöhen gelöst, indem das teilweise Ausblenden des Containerüberlaufs mit der negativen unteren Grenze der Spalte kombiniert wird der positive innere Fleck.

Schauen Sie sich zuerst den Code an:

#wrap{
 overflow: hidden;
 }

#sideleft, #sideright{
 padding-bottom: 32767px;
 margin-bottom: -32767px; 
 }

Implementierungsprinzip:

Blockelemente müssen in einem Container enthalten sein.

Overflow: Hidden auf die Elemente im Container anwenden.

Wenden Sie padding-bottom (einen ausreichend großen Wert) auf das Blockelement der Spalte an.

Wenden Sie margin-bottom (einen ausreichend großen Wert) auf das Blockelement der Spalte an.

padding-bottom streckt die Spalte auf die gleiche Höhe und negativer margin-bottom bringt sie in die Ausgangsposition unten zurück. Gleichzeitig wird der Überlaufteil ausgeblendet.

Kompatibel mit allen Browsern

IE Mac 5

Gehen Sie sehr korrekt, also filtern Sie den obigen Code heraus.

/*\*/
#sideleft, #sideright{
 padding-bottom: 32767px;
 margin-bottom: -32767px; 
 }
/**/

Opera

1. Opera7.0-7.2 kann den Überlaufteil nicht korrekt löschen, also fügen Sie hinzu:

/* easy clearing */
#wrap:after
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]'; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
#wrap
 {
 display: inline-block;
 }
/*\*/
#wrap
 {
 display: block;
 }
/* end easy clearing */
/*\*/

2. Es gibt einen Fehler in der Überlaufbehandlung von Opera8: versteckt. Der folgende Code muss hinzugefügt werden:

/*\*/
#sideleft, #sideright
 {
 padding-bottom: 32767px !important;
 margin-bottom: -32767px !important; 
 }
@media all and (min-width: 0px) {
#sideleft, #sideright
 {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important; 
 }
#sideleft:before, #sideright:before
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 background: inherit;
 padding-top: 32767px !important;
 margin-bottom: -32767px !important;
 height: 0;
 }
}
/**/

3. B2 von Opera9 behebt den Fehler von 8.

Testumgebung: IE5.01, IE5.5, IE6.0, Firefox1 .5, Opera8 .5, Netscape 7.2 bestanden.

Das obige ist der detaillierte Inhalt vonDie ultimative Methode für CSS-Layout mit adaptiver Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!