Heim > Artikel > Web-Frontend > Praktisches CSS-Tutorial zum Fixieren der Fußzeile am Ende der Seite

Praktisches CSS-Tutorial zum Fixieren der Fußzeile am Ende der Seite

高洛峰Original: 2017-03-10 11:05:131942Durchsuche

In diesem Artikel wird hauptsächlich die eigentliche CSS-Praxis zum Korrigieren der Fußzeile am Ende der Seite vorgestellt. Achten Sie auf das Problem des CSS-Löschens von Floats.

Die Position der Fußzeile

In der Fußzeile einer Webseite werden normalerweise Hilfelinks und Copyright-Informationen platziert. Die Fußzeile sollte sich natürlich am unteren Rand der Seite befinden. Wenn der Webseiteninhalt vor der Fußzeile jedoch relativ klein ist oder ein Monitor mit einer größeren vertikalen Auflösung verwendet wird, scheint die Fußzeile in der Regel nicht angezeigt zu werden Die Situation unten ist wie unten dargestellt.

Da die Fußzeile grundsätzlich ein gemeinsamer Bestandteil aller Seiten einer Website ist, variiert der Inhalt verschiedener Seiten, sodass es tatsächlich möglich ist, dass einige Seiten nicht genügend Inhalt haben . So eine Frage. Darüber hinaus beeinträchtigt dieses Problem insbesondere bei Fußzeilen, die Hintergrundfarben enthalten, das Erscheinungsbild erheblich.

Wir möchten also, dass die Fußzeile unabhängig von der Menge des Inhalts auf der Seite genau unten positioniert wird.
So fixieren Sie die Fußzeile unten
Ist eine absolute Positionierung möglich?

Vielleicht hat jemand darüber nachgedacht, die Fußzeile auf position:fixed zu setzen und sie dann unten zu positionieren. Unabhängig von IE6, das diesen Attributwert nicht unterstützt, führt diese Schreibweise tatsächlich dazu, dass die Fußzeile am unteren Rand des Browsers angezeigt wird, wenn der Inhalt der Webseite selbst ausreicht, und beim Scrollen Die Fußzeile wird am unteren Rand des Browsers angezeigt und bleibt an ihrer ursprünglichen Position. Dieser Effekt ist offensichtlich für die meisten Websites nicht geeignet.

Wie Sie sich vorstellen können, ist der von uns benötigte Effekt:

Wenn die Webseite viel Inhalt hat, sehen Sie nur die untere Fußzeile, wenn Sie nach unten scrollen.
Wenn der Inhalt der Webseite klein ist, befindet sich die Fußzeile immer noch am Ende der gesamten Seite, der Rest bleibt leer.

Konventionelle und einfache Implementierungsmethode

CSS Sticky Footer bietet eine vernünftige Implementierungsmethode, um die Fußzeile unten zu fixieren. Einerseits handelt es sich jedoch um eine englische Website, und andererseits kann die Schreibmethode, die sie bietet, noch verbessert werden. Daher wird dieser Artikel auf den Inhalt verweisen und eine angemessene Implementierungsmethode angeben.

Zuerst benötigen Sie eine solche HTML-Struktur:

<body>  
    <p class="wrapper">  
        <!--网页内容-->  
        <p class="footer_placeholder"></p>  
    </p>  
    <p class="footer">  
        <!--页脚-->  
    </p>  
</body>

p.wrapper ist der äußere Container für den gesamten Inhalt der Webseite mit Ausnahme der Fußzeile, Fußzeile p . Die Fußzeile befindet sich auf derselben Ebene. p.footer_placeholder muss am Ende aller Inhalte auf der Webseite platziert werden, also als letztes untergeordnetes Element von p.wrapper. Seine Funktion wird später erläutert.

Als nächstes schreiben Sie das CSS und erklären es der Reihe nach.

html, body{height:100%;}

Wenn der Inhalt der Webseite nicht ausreicht, ist die tatsächliche Höhe des Textkörpers und des HTML möglicherweise kleiner als der sichtbare Bereich des Browsers. Geben Sie daher eine Höhe von 100 ein % für den Text und HTML. Darüber hinaus verwenden die folgenden direkten untergeordneten Elemente auch die prozentuale Schreibmethode. Die prozentuale Schreibmethode darf nur wirksam sein, wenn das direkte übergeordnete Element eine bestimmte Höhendefinition hat.

.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}

Alle Webinhalte befinden sich in diesem p.wrapper und die Mindesthöhe ist definiert (IE6 verwendet einen Hack, da das übergeordnete Element dieses Elements der Körper mit 100 ist). % Höhe definiert. Daher nimmt die Höhe des p.wrapper-Elements unabhängig von der Menge des Inhalts den gesamten sichtbaren Bereich des Browsers ein. Stellen Sie dann für den unteren Rand entsprechend der Höhe der Fußzeile gleiche negative Werte ein, sodass die Fußzeile genau am Ende des Seiteninhalts erscheint.

.footer, .footer_placeholder{height:120px;}    /*假定页脚的高度为120px*/

p.footer_placeholder, im wahrsten Sinne des Wortes das Platzhalterelement der Fußzeile, es ist nur ein leeres p, die Definitionshöhe ist dieselbe wie die Fußzeile, die existiert, um zu geben Fußzeile lässt Platz. Ohne sie könnte so etwas passieren ↓
Praktisches CSS-Tutorial zum Fixieren der Fußzeile am Ende der Seite

Zu diesem Zeitpunkt wurde die unten fixierte Fußzeile implementiert. Die Summe der CSS-Teile ist:

html, body{height:100%;}   
.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}   
.footer, .footer_placeholder{height:120px;}   
  
如果还需要考虑css初始化和清理浮动，可能你还需要添加下面这部分css：   
  
body{margin:0;}   
.footer_placeholder{clear:both;}

Das obige ist der detaillierte Inhalt vonPraktisches CSS-Tutorial zum Fixieren der Fußzeile am Ende der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Methode zur Verwendung von CSS zum Zentrieren schwebender ElementeNächster Artikel：Einführung in die Methode zur Verwendung von CSS zum Zentrieren schwebender Elemente

In Verbindung stehende Artikel

Mehr sehen