Vorstellung von fünf Möglichkeiten zur Implementierung der Fußzeilenplatzierung mit CSS

Sticky Footer bedeutet, dass sich der Fußzeilenteil der Webseite immer am unteren Rand des Browserfensters befindet.

Wenn der Inhalt der Webseite lang genug ist, um die sichtbare Höhe des Browsers zu überschreiten, wird die Fußzeile zusammen mit dem Inhalt an das Ende der Webseite verschoben.
Aber wenn Ist der Inhalt der Webseite nicht lang genug, wird die Fußzeile unten platziert und bleibt am unteren Rand des Browserfensters.

Methode 1: Setzen Sie das <a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a> im Inhaltsteil auf eine negative Zahl

<p class="wrapper">
    <!-- content -->
    <p class="push"></p>
</p>
<p class="footer">footer</p>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  min-height: 100%;  
  margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
  height: 50px;
}

1. Diese Methode erfordert zusätzliche Platzhalterelemente (p.push) im Container. Der

   von

2. p.wrappermargin-bottom muss mit dem p.footer-Wert von -height übereinstimmen. Beachten Sie, dass es sich um einen negativen height handelt.

Methode 2: Setzen Sie das <a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a> der Fußzeile auf eine negative Zahl

• Fügen Sie ein übergeordnetes Element außerhalb des Inhalts hinzu und erstellen Sie das <a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a> des Inhaltsteils 🎜> entspricht dem height der Fußzeile.

<p class="content">
  <p class="content-inside">
    <!-- content -->
  </p>
</p>
<p class="footer">footer</p>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

Methode 3: Verwenden Sie calc(), um die Inhaltshöhe festzulegen

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

• Hier übernehmen< 🎜 Zwischen > und p.content besteht eine Lücke von 20 Pixeln, also 70 Pixel = 50 Pixel + 20 Pixel Die Höhe ist festgelegt. Wenn die Fußzeile zu viel Inhalt enthält, kann das Layout zerstört werden. p.footer

Methode 5: Rasterlayout verwenden

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>

Das obige ist der detaillierte Inhalt vonVorstellung von fünf Möglichkeiten zur Implementierung der Fußzeilenplatzierung mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!