Einführung in fünf Möglichkeiten zur Implementierung der Fußzeilenplatzierung mithilfe von CSS

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von fünf CSS-Methoden zur Implementierung von Footer Bottoming vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

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 nicht lang genug ist, verbleibt die untere Fußzeile im unteren Fensterbereich des Browsers.

Methode 1: Setzen Sie den unteren Rand des Inhaltsteils 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ätzlichen Platz im Container. Element (p.push).

2. Der margin-bottom von p.wrapper muss mit dem -height-Wert von p.footer übereinstimmen. Beachten Sie, dass es sich um eine negative Höhe handelt.

Methode 2: Setzen Sie den oberen Rand der Fußzeile auf eine negative Zahl

Fügen Sie ein übergeordnetes Element außerhalb des Inhalts hinzu und lassen Sie den Abstand des Inhaltsteils -Bottom entspricht der Höhe 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;
}

Es wird davon ausgegangen, dass zwischen p.content und p.footer ein Abstand von 20 Pixeln besteht, also 70px=50px+20px

Methode 4: Flexbox-Layout verwenden

Die Fußzeilenhöhe der oben genannten drei Methoden ist festgelegt. Wenn der Inhalt der Fußzeile zu groß ist, kann das Layout zerstört werden.

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

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

Methode Fünf: Raster-Layout verwenden

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

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

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