CSS: Min-Height ist nicht mit der Firefox-Browserlösung kompatibel

Wenn wir die Seite strukturieren, unterteilen wir sie normalerweise in drei Abschnitte: Kopfzeile, Hauptteil und Fußzeile. Zum Beispiel diese Seite:

Zu diesem Zeitpunkt müssen wir die Mindesthöhe des Körperteils festlegen, um zu vermeiden, dass der Fußzeilenteil in der Mitte der Seite erscheint. Zum Beispiel die folgende Schreibmethode:

.page-content-header {    　　
min-height: 5%;
}
.page-content-body {    　　
min-height: 100%;}
.page-content-footer {    　　
min-height: 5%;}

Bei dieser Schreibmethode hat der Hauptteil eine Höhe, die die Seitengröße ausfüllt, und der Fußzeilenteil befindet sich natürlich am untersten Ende der Seite Wenn der Inhalt des Körperteils 100 % überschreitet, wird die Höhe automatisch erweitert und es kommt zu keinem Überlauf.

Hier kommt jedoch das Problem. Firefox ist mit dieser Schreibmethode nicht kompatibel: 100 % wird überhaupt nicht wirksam. Wir können die folgende Methode verwenden, um sie kompatibel zu machen:

.page-content-body {    　　
min-height: 100%;    　　
/*火狐兼容*/    　　
min-height: 600px !important;}
.page-content-body:after {   　　
content:"";　　
visibility:hidden;　　
display:block;　　
clear:both;　　
height:0px;}

Zuerst verwenden wir !important, um den Firefox-Browser zu hacken, legen eine Mindesthöhe von 600 Pixel fest und verwenden dann das Pseudoelement: after, um eine Stillöschung durchzuführen, damit der Inhalt das Minimum überschreitet Höhe, die Höhe erhöht sich entsprechend.

Wir stellen die Anzeige des Anzeigefeldtyps auf Elementblock auf Blockebene ein, setzen sie frei, um schwebende Elemente sowohl auf der linken als auch auf der rechten Seite zuzulassen, und fügen sie ein der generierte Inhalt Der Inhalt ist leer, dann wird die Höhe auf 0 gesetzt, wodurch das Element unsichtbar wird.

Dadurch erreicht Firefox eine minimale Höhe und Inhalte, die über die Anpassungsfähigkeit hinausgehen.

Das obige ist der detaillierte Inhalt vonCSS: Min-Height ist nicht mit der Firefox-Browserlösung kompatibel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!