Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung, wie die Fußzeile immer am Ende der Webseite angezeigt wird

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

高洛峰
高洛峰Original
2017-03-20 13:38:082247Durchsuche

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>

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;}
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;}

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:

header



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;}

Padding-Bottom zum Inhalt wie oben hinzufügen

Anhang:

Bei weniger Inhalt:

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

Bei viel Inhalt:

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

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!

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