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 🎜>

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

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

body > .content {
  flex: 1;
}

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!