Wie man die Fußzeile als Teil der Seite ("Fußzeile") am unteren Rand des Fensters festhält - dies ist wahrscheinlich das häufigste Problem beim Layout von Site-Seiten. Natürlich gibt es Lösungen, und davon gibt es mehrere. Im Folgenden finden Sie eine Möglichkeit, um sicherzustellen, dass die Fußzeile immer an das Ende der Seite gedrückt wird, unabhängig von der Inhaltsmenge und der Art des Browsers.
Es ist notwendig
Grundkenntnisse in CSS und HTML
Anleitung
Schritt 1
Nehmen wir eines der typischeren Paginierungsschemata als Beispiel – es hat einen Dachboden (Kopfzeile), einen Hauptblock und eine Fußzeile. Natürlich können Sie bei Bedarf mehrere Spalten in den Hauptblock einfügen, aber wir werden dies hier nicht tun, wir konzentrieren uns nur darauf, die Fußzeile nicht zu positionieren. Der HTML-Code der Seite beginnt mit der Deklaration der Spezifikation:
Zwischen den Tags und zusätzlich zum Seitentitel platzieren wir einen Hinweis auf die Codierung: sowie einen Link zu einer externen CSS-Datei mit einer Beschreibung der Stile: @import "styles.css"; Beschreibung der Stile direkt in den HTML-Code der Seite, um Komplikationen mit dem Opera-Browser der neunten Version zu vermeiden. Zwischen den Tags und der Blockstruktur der Seite platzieren. Der erste ist natürlich der Titelblock. Wir geben ihm die Header-ID, um Stile für diesen bestimmten Block festlegen zu können:
Diese Kopfzeile befindet sich immer oben im Fenster.
Dann - der Hauptblock der Seite. Es besteht aus zwei verschachtelten - außen (Kennung - Außen) und Innen (Kennung - Außenhülle):
Dies ist der Hauptteil.
Und zum Schluss die Fußzeile:
Es ist die Fußzeile - immer am unteren Rand des Fensters!
Die komplette Seite sieht so aus:
So drücken Sie auf die Fußzeile
@import "styles.css";
Diese Kopfzeile befindet sich immer oben im Fenster.
Dies ist der Hauptteil.
Es ist die Fußzeile - immer am unteren Rand des Fensters!
Schritt 2
Kommen wir nun zum Inhalt des Stylesheets. Es implementiert das folgende Schema: Der Hauptseitenblock wird auf 100% Höhe gesetzt, der Titel wird absolut positioniert und die Fußzeile relativ. Um zu verhindern, dass sich die Überschrift mit dem Hauptinhalt der Seite überschneidet, wird dieser Hauptinhalt in einem zusätzlichen Feld innerhalb des Hauptfelds platziert, und dieses zusätzliche Feld wird auf einen oberen Rand gesetzt, der der Höhe des Überschriftenfelds entspricht. Und die Fußzeile erhält einen negativen oberen Rand, der ihrer Höhe entspricht - auf diese Weise wird sie auf ihre volle Höhe über die Unterkante des Fensters angehoben. Vollständiger Inhalt der CSS-Datei: * {margin: 0; Polsterung: 0}
html, Körper {Höhe: 100%;} Körper {
Farbe: Schwarz;
Position: relativ;
}
#äußeres {
Mindesthöhe: 100%;
Rand: 0;
Hintergrund: weiß;
Farbe: Schwarz;
} * html #outer {Höhe: 100%;}
#Header {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 70px;
Hintergrund: # 304a00;
Überlauf versteckt;
Farbe weiß;
Textausrichtung: Mitte;
} #Fusszeile {
Position: relativ;
Rand oben: -50px;
Lösche beide;
Breite: 100 %;
Höhe: 50px;
Hintergrundfarbe: # 304a00;
Farbe weiß;
Textausrichtung: Mitte;
}
.outerwrap {
Schwimmer: links;
Breite: 100 %;
Polsterung-Oberseite: 71px;
} Diese Datei sollte unter dem Namen gespeichert werden, den wir im HTML-Code der Seite angegeben haben - style.css.
