Mehrere Möglichkeiten, die Fußzeile unten in CSS zu implementieren

Dieses Mal zeige ich Ihnen verschiedene Möglichkeiten, Footer to the Bottom in CSS zu implementieren. Was sind die Vorsichtsmaßnahmen, um Footer to the Bottom in CSS zu implementieren?

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 Rand unten 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ätzliche Platzhalterelemente (p.push) im Container.

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 Rand oben der Fußzeile auf eine negative Zahl

und fügen Sie ein übergeordnetes Element hinzu außerhalb des Inhalts. Und stellen Sie sicher, dass der padding-bottom des Inhaltsteils der Höhe der Fußzeile entspricht.

<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;
}

Angenommen, p Hier gibt es eine Lücke von 20 Pixeln zwischen Inhalt und Fußzeile, also 70 Pixel = 50 Pixel + 20 Pixel

Methode 4: Flexbox-Layout verwenden

Die Fußzeilenhöhe der oben genannten drei Methoden ist festgelegt. Wenn die Fußzeile zu viel Inhalt enthält, 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 5: Rasterlayout 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;
}

Ich glaube, Sie werden den Fall lesen Dieser Artikel Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

React und CSS3 implementieren die WeChat-Animation zum Öffnen roter Umschläge

Erweiterte Verwendung von Hintergrundanhängen in CSS

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten, die Fußzeile unten in CSS zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!