Ausführliche Erklärung von zwei Routinebeispielen für den absoluten Tiefpunkt von Sticky Footer

In diesem Artikel werden hauptsächlich zwei Routinen vorgestellt, die das absolute Ende von Sticky Footer im Detail erklären. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Absoluter Boden oder Sticky Footer ist ein alter und klassischer Seiteneffekt:

Wenn der Seiteninhalt den Bildschirm überschreitet, wird das Fußzeilenmodul wie eine normale Seite unter den Inhalt geschoben Sie müssen die Bildlaufleiste ziehen, um

anzuzeigen. Wenn der Seiteninhalt kleiner als die Bildschirmhöhe ist, wird das Fußzeilenmodul am unteren Bildschirmrand fixiert, genau wie bei einer festen Positionierung mit einem unteren Rand von Null

1. Klassische Routine

Die Idee dieser Routine besteht darin, die Mindesthöhe festzulegen: 100 % für den Inhaltsbereich und ändern Sie die Fußzeile. Schieben Sie es an den unteren Bildschirmrand

und fügen Sie dann margin-top zur Fußzeile hinzu, dessen Wert der negative Wert der Fußzeilenhöhe ist, damit die Fußzeile zurückkehren kann bis zum unteren Bildschirmrand

HTML:

<p class="wrap">
  <p class="content">
    <p>填充内容</p>
  </p>
</p>
<p class="footer">
  <p>这是页脚</p>
</p>

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 60px;
}
    
.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -60px;
}

Zu beachten ist, dass die Auffüllung des Inhaltsbereichs, die Höhe und der Rand der Fußzeile einheitlich sein müssen

Die Kompatibilität dieser Schreibmethode ist sehr gut und kann auch normal angezeigt werden in IE7 laut aktuellem Test

Aber wenn das Hauptlayout der Seite andere Kompatibilitätsprobleme aufweist, muss Sticky Footer einige entsprechende Änderungen vornehmen

2 🎜>

Es muss gesagt werden, dass CSS3 eine Änderung im Frontend und Flexbox eine Änderung im Webseitenlayout bewirkt hat

Obwohl die Kompatibilität dies einschränkt Förderung von Flexbox in China, es ist unbestreitbar, dass Flexbox ein wichtiger Trend im Front-End-Layout ist

HTML:

<p class="content">
  <p>填充内容</p>
  <hr />
</p>
<p class="footer">
  <p>这是页脚@WiseWrong</p>
</p>

CSS:

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

body > .content {
  flex: 1;
}

Im Vergleich zur klassischen Routine ist der erste der HTML-Teil, der Inhalt des Inhaltsbereichs benötigt keinen Wrap-Container mehr

Dann war der CSS-Teil erfolgreich reduziert, mit nur vier Codezeilen wurde das Problem gelöst, das einst eine Generation beschäftigte

Und mit Flexbox ist es nicht nötig, die Höhe der Fußzeile zu begrenzen, wodurch das Seitenlayout flexibler wird

Natürlich liegen die Mängel auch auf der Hand. Nur Browser ab IE10 unterstützen das Flex-Layout

Verwandte Empfehlungen:

CSS-Positionierung DIV absolute bottom_html/css_WEB -ITnose

So korrigieren Sie den unteren Rand der Fußzeile

Wie Sie mit Javascript die Bildlaufleiste bis zum unteren Codebeispiel beurteilen, detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von zwei Routinebeispielen für den absoluten Tiefpunkt von Sticky Footer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!