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:082235Durchsuche
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
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
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:
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!