Sticky Footer Die absolute Bottom-Methode

Dieses Mal werde ich Ihnen die Methode zum Erreichen des absoluten Endes von Sticky Footer vorstellen. Was sind die Vorsichtsmaßnahmen, um das absolute Ende von Sticky Footer zu erreichen?

Ich habe kürzlich mehrere Front-Ends mit unterschiedlicher Berufserfahrung interviewt. Ich weiß nicht einmal, was das absolute Endergebnis ist, und niemand kann mir sagen, wie ich es erreichen kann. Man hat das Gefühl, dass es im Frontend-Bereich eine Mischung aus Gutem und Schlechtem gibt

Absolute Bottom oder Sticky Footer ist ein alter und klassischer Seiteneffekt:

Wenn der Seiteninhalt über den Bildschirm hinausgeht, wird das Fußzeilenmodul wie eine normale Seite unter den Inhalt verschoben, um

anzuzeigen am unteren Bildschirmrand, genau wie eine feste Positionierung mit einem unteren Rand von Null

1. Klassische Routine

Die Idee dieser Routine besteht darin, den Inhaltsbereich auf Mindesthöhe auf 100 % festzulegen, die Fußzeile an den unteren Bildschirmrand zu verschieben

und dann Rand hinzuzufügen. top zur Fußzeile, deren Wert der negative Wert der Fußzeilenhöhe ist, sodass die Fußzeile zum unteren Bildschirmrand zurückkehren kann

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 die Auffüllung des Inhaltsbereichs, die Höhe und der Rand der Fußzeile, die einheitlich sein müssen

Dies Die Kompatibilität der Schreibmethode ist sehr gut , und es kann laut tatsächlichem Test auch normal in IE7 angezeigt werden

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

2. Flexbox

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

Obwohl die Kompatibilität die Werbung für Flexbox in China eingeschränkt hat, ist es unbestreitbar, dass Flexbox ein wichtiger Trend im Frontend-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 Inhaltsbereich benötigt keinen Wrap-Container mehr

Dann hat der CSS-Teil erfolgreich an Gewicht verloren und verwendet nur noch vier Codezeilen , es hat 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 auch die Nachteile auf der Hand. Nur IE10 und höher unterstützen das Flex-Layout.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Reines CSS, um einen 3D-Fotowandeffekt zu erzielen

CSS, um ein Fächermuster zu zeichnen

Das obige ist der detaillierte Inhalt vonSticky Footer Die absolute Bottom-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!