Detaillierte Erklärung, wie die Fußzeile immer am Ende der Webseite angezeigt wird-HTML-Tutorial-php.cn

Detaillierte Erklärung, wie die Fußzeile immer am Ende der Webseite angezeigt wird

高洛峰

Freigeben： 2017-03-20 13:38:08

Original

2248 Leute haben es durchsucht

Das letzte Mal habe ich gesagt, dass der Kopf und das Ende der Webseite in einer separaten Datei getrennt und von allen Webseiten gemeinsam genutzt werden sollten. Ich habe jedoch festgestellt, dass das Ende bei einigen Methoden praktischer ist wird dem Kopf sofort folgen. . Wenn der Inhalt einiger Seiten klein ist, kann der Schwanz außerdem nicht nach unten gedrückt werden. Daher werden wir dieses Mal untersuchen, wie man den Schwanz unten hält. .

Geben Sie zuerst den HTML-Code aus:

<body>
<div class="header">头部</div>

<div class="content">
内容<br />
内容<br />
内容<br />
内容<br />

同上，以下省略N行。。。
</div>

<div class="footer">尾部</div>
</body>

Nach dem Login kopieren

Methode 1: Tatsächlich sollte sich diese Methode immer unten im Browserfenster befinden, nicht unten Unten auf der Webseite Die Methode ähnelt dem Durchsuchen bestimmter Webseiten und es gibt immer eine Zeile mit Eingabeaufforderungen unten, wenn Sie nicht angemeldet oder registriert sind. Dies ist wahrscheinlich dasselbe wie die Schaltfläche „Zurück nach oben“ . .

Letztes Bild: Es sieht so aus

Detaillierte Erklärung, wie die Fußzeile immer am Ende der Webseite angezeigt wird

CSS-Code:

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}

Nach dem Login kopieren

Sie müssen eine feste Höhe für die Fußzeile festlegen

Methode 2: Dies ist die Methode, um die Fußzeile am unteren Rand der Webseite zu positionieren + Absolute Positionierung

body{position:relative;height:100%;}

.content{background-color: gray;padding-bottom: 100px;}

.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}

Nach dem Login kopieren

im mittleren Inhaltsteil Der Zweck des Hinzufügens von padding-bottom besteht darin, dass der Inhalt vollständig angezeigt werden kann, ohne dass er von der Fußzeile verdeckt wird. Gleichzeitig muss eine feste Höhe für die Fußzeile festgelegt werden

Methode 3: Feste Fußzeilenhöhe +Randnegativer Wert

HTML-Code ist anders:

content< ;br />
content

Content

Content

Wie oben, die folgenden N Zeilen werden weggelassen. . .

CSS-Code:

body{height: 100%;}
.wrap{min-height: 100%;}
.header{height: 100px;background-color: greenyellow;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}

Nach dem Login kopieren

Padding-Bottom zum Inhalt wie oben hinzufügen

Anhang:

Bei weniger Inhalt:

Bei viel Inhalt:

Detaillierte Erklärung, wie die Fußzeile immer am Ende der Webseite angezeigt wird

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie die Fußzeile immer am Ende der Webseite angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!