CSS erzielt den „Bottom Absorption“-Effekt im Footer

Wir stoßen häufig auf dieses Problem: Wie kann man mit CSS den Effekt erzielen, dass das untere Element „unten klebt“. In diesem Artikel werden zwei Dinge zum „unten klebt“ verstanden:

• Erstens möchten wir, dass die Schaltfläche unabhängig von der Menge des Inhalts unten im sichtbaren Fenster fixiert ist und der Inhaltsbereich gescrollt werden kann.
• Zweitens: Wenn der Inhaltsbereich weniger Inhalt hat, wird der Fußzeilenbereich nicht mit dem Inhaltsbereich angeordnet, sondern immer am unteren Bildschirmrand angezeigt. Wenn der Inhaltsbereich mehr Inhalt hat, kann sich die Fußzeile mit dem Dokumentfluss erweitern und wird immer am unteren Seitenrand angezeigt.
  

Wenn es um die Realisierung des „Bottom-Absorbing“-Effekts geht, sind Sie möglicherweise mit dem Sticky-Footer-Layout vertrauter, diese Methode wird jedoch hauptsächlich zur Lösung der zweiten Situation verwendet. In diesem Artikel werden die folgenden drei Lösungen verwendet, um die beiden oben genannten Effekte zu erzielen. Außerdem werden die Implementierungsprinzipien und ihre Anwendbarkeit kurz erläutert. Der Wrapper besteht aus zwei Teilen: dem Inhalt und dem festen unteren Bereich (Footer).

HTML-Einstellungen:

<!-- Wrapper ist der übergeordnete Container, der Inhalt und Fußzeile umschließt--></div>
<div Klasse="Wrapper">
   <div Klasse="Inhalt">
     <ul>
       <!-- Hauptinhaltsbereich der Seite--></div>
       <li>1. Dies ist der Inhalt, dies ist der Inhalt…</li>
       <li>2. Dies ist der Inhalt, dies ist der Inhalt…</li>
       <li>3. Dies ist der Inhalt, dies ist der Inhalt…</li>
       <li>4. Dies ist der Inhalt, dies ist der Inhalt …</li>
       <li>5. Dies ist der Inhalt, dies ist der Inhalt …</li>
       <li>6. Dies ist der Inhalt, dies ist der Inhalt…</li>
       <li>7. Dies ist der Inhalt, dies ist der Inhalt …</li>
       <li>8. Dies ist der Inhalt, dies ist der Inhalt…</li>
       <li>9. Dies ist der Inhalt, dies ist der Inhalt …</li>
      </ul>
   </div>
  <div Klasse="Fußzeile">
    <!-- Bereiche, die absorbiert werden müssen-->
    Untere Schaltfläche</div>
 </div>

Hinweis: Die Implementierung der folgenden Lösungen basiert auf dieser HTML-Struktur

Lösung 1: Position verwenden, um die zu fixierenden Elemente zu positionieren

Prinzipanalyse:

• Wir hoffen, dass die Höhe des äußeren Containers des Wrappers (einschließlich HTML und Text) den gesamten Bildschirm ausfüllt, d. h., wir legen die Höhe auf 100 % und die Mindesthöhe des Wrappers auf 100 % fest. Hier wird die Mindesthöhe anstelle der Höhe festgelegt, um sicherzustellen, dass die Mindesthöhe des gesamten Wrappers auf den gesamten Bildschirm erweitert werden kann. Selbst wenn der Inhalt nicht ausreicht, um den Bildschirm auszufüllen, entspricht die Höhe des Wrappers immer noch der Höhe des gesamten Bildschirms. Wenn die Höhe des Wrappers mit der Höhe des Inhalts zunimmt, kann seine Höhe größer sein als die Höhe des sichtbaren Fensters.
• Wenn Sie den Padding-Bottom-Wert des Inhalts (des Containers, der Inhalt anzeigen muss, das vorherige Geschwisterelement des Footers) so festlegen, dass er größer oder gleich dem Höhenwert des Footers ist, können Sie sicherstellen, dass der Inhalt nicht durch den Footer-Bereich unten abgedeckt wird.
• Beim Festlegen der Methode zur Positionierung der Fußzeile müssen wir hier zwischen zwei Effekten unterscheiden: Wenn Sie möchten, dass die Fußzeile am unteren Seitenrand fixiert wird, legen Sie die Position des Wrappers fest: relativ. Legen Sie dementsprechend die Position der Fußzeile fest: absolut, um die Fußzeile absolut relativ zum Wrapper zu positionieren. Auf diese Weise kann die Fußzeile unabhängig vom Inhalt immer noch am unteren Seitenrand fixiert werden. Wenn Sie sie am unteren Rand des sichtbaren Fensters fixieren möchten, legen Sie die Position der Fußzeile fest: fixiert und legen Sie die entsprechende Positionierung fest.
• Stellen Sie die Höhe auf einen festen Höhenwert ein.

Anwendbare Szenarien:

Die verwendeten Eigenschaften sind in allen Browsern ausgereift implementiert. Im Vergleich zur zweiten und dritten Lösung ist diese Methode am meisten zu empfehlen. Dies ist auf die folgenden Szenarien nicht anwendbar: Im positionierten (festen) Bereich befindet sich ein Textfeld, da im iOS-System, wenn das Textfeld die Eingabemethode aufruft, der positionierte Bereich angezeigt wird und in einiger Entfernung vom unteren Rand liegt.

Am unteren Seitenrand fixiert

Demo: https://codepen.io/hu0950/pen/yRVvQL

CSS-Einstellungen:

html,
Körper
  Höhe 100%
.Verpackung
  Position relativ // ​​Schlüssel Box-Größe Border-Box
  min-height 100% // Key padding-bottom 100px // Dieser Wert wird so eingestellt, dass er größer oder gleich der Höhe der Schaltfläche ul ist
    Listenstil: keiner
    li
      Höhe 100px
      Hintergrund hellblau
.Fußzeile
  Position absolut // Taste unten 0
  links 0
  rechts 0
  Höhe 100px //Setzen Sie eine feste Höhe Hintergrund orange

Am unteren Rand des sichtbaren Fensters fixiert

Demo: https://codepen.io/hu0950/pen/NObMPb?editors=1100#0

CSS-Einstellungen:

html,
Körper
  Höhe 100%
.Verpackung
  Box-Größe, Rahmen-Box
  min-height 100% // Key padding-bottom 100px // Dieser Wert wird so eingestellt, dass er größer oder gleich der Höhe der Schaltfläche ul ist
    Listenstil: keiner
    li
      Höhe 100px
      Hintergrund hellblau
.Fußzeile
  Position fixiert // Fixiere den Button am unteren Rand des sichtbaren Fensters bottom 0
  links 0
  rechts 0
  Höhe 100px //Setzen Sie eine feste Höhe Hintergrund orange

Lösung 2: Flexbox-Layout verwenden

Demo: https://codepen.io/hu0950/pen/bmBMMr

Anwendbare Szenarien:

Das Flex-Layout hat eine einfache Struktur und prägnanten Code. Allerdings treten bei Flex Kompatibilitätsprobleme auf. Daher müssen Sie bei der Verwendung dieser Layoutmethode vorsichtig sein. Um den Effekt der Fixierung am unteren Seitenrand zu erzielen, wird diese flexible Layout-Idee übernommen. Die Höhe des unteren Fixierungsbereichs kann flexibel eingestellt werden, ohne die Höhe der Fußzeile zu definieren. Dies ist auch der Vorteil dieser Methode.

Am unteren Seitenrand fixiert

Prinzipanalyse:

• Stellen Sie die Mindesthöhe des Wrappers auf 100 % ein. Hier wird die Mindesthöhe anstelle der Höhe eingestellt. Der Zweck besteht darin, die Mindesthöhe des gesamten Wrappers auf den gesamten Bildschirm auszudehnen. Das heißt, wenn der Inhalt nicht ausreicht, um den Bildschirm auszufüllen, ist die Höhe des Wrappers immer noch Vollbild. Wenn sich die Höhe des Wrappers mit der Höhe des Inhalts ändert, kann seine Höhe größer sein als die Höhe des sichtbaren Fensters und ist nicht immer gleich der Höhe des Bildschirms.
• Stellen Sie den Layoutmodus des Wrappers auf „Flex“ und den Flex des Inhalts auf „1“ ein, sodass die Höhe des Inhalts immer der Höhe des Wrappers abzüglich der Höhe des unteren Fußbereichs entspricht.

CSS-Einstellungen:

html,
Körper
  Höhe 100%
.Verpackung
  min-height 100% // Taste display flex // Taste flex-direction column // Taste .content
  flex 1 //Schlüssel ul
    Listenstil: keiner
    li
      Höhe 100px
      Hintergrund hellblau
// Die Höhe kann unverändert bleiben.footer
    Polsterung 20px
    Hintergrund orange

Am unteren Rand des sichtbaren Fensters fixiert

Prinzipanalyse:

Zusätzlich zu den oben genannten Punkten (Analyse in Lösung 2 – Behoben unten auf der Seite) sind die folgenden Punkte zu beachten:

• Da der Footer durch die fixe Einstellung außerhalb des Dokumentflusses liegt, muss dem Wrapper ein Padding gegeben werden. Der Wert sollte größer oder gleich der Höhe des Buttons sein, um sicherzustellen, dass der Footer den Inhalt des Inhaltsbereichs nicht überdeckt.
• Stellen Sie den Fußzeilenpositionierungsmodus auf „fest“ und legen Sie die entsprechende Positionierung fest, um die Fußzeile am unteren Rand des sichtbaren Fensters zu fixieren.

CSS-Einstellungen:

html,
Körper
  Höhe 100%
.Verpackung
  display flex // Taste min-height 100% // Taste padding-bottom 62px // Dieser Wert wird so eingestellt, dass er größer oder gleich der Höhe der Spalte „Flex-Direction“ der Schaltfläche ist // Taste .content
  flex 1 //Schlüssel ul
    Listenstil: keiner
  li
    Höhe 100px
    Hintergrund hellblau
.Fußzeile
  Position fixiert // Taste links 0
  rechts 0
  unten 0
  Polsterung 20px
  Hintergrund orange

Lösung 3: Verwenden von calc

Anwendbare Szenarien

Diese Lösung erfordert keine zusätzliche Stilverarbeitung und der Code ist prägnant, aber leider ist das System der niedrigeren Version des mobilen Endgeräts nicht mit dem Calc-Attribut kompatibel.

Am Ende der Seite behoben Demo: https://codepen.io/hu0950/pen/ePBjdB

Prinzipanalyse:

Der Wrapper wird auf min-height: 100% eingestellt, in der Hoffnung, dass der Inhalt bei geringerer Inhaltsmenge den gesamten Bildschirm ausfüllen kann. Gleichzeitig kann die Höhe des Wrappers mit der Höhe des Inhalts zunehmen, wenn der Inhalt eine Höhe erreicht, die größer als der Bildschirm ist. Auf diese Weise kann sichergestellt werden, dass der Footer sequenziell unterhalb des Inhalts angeordnet wird.

CSS-Einstellungen:

html,
Körper
  Höhe 100%
.Verpackung
  min-height 100% //Schlüssel: min-height statt height
.Inhalt
  min-height calc(100% - 100px) //Schlüssel: min-height statt height
  ul
    Listenstil: keiner
  li
    Höhe 100px
    Hintergrund hellblau
// Feste Höhe.Fußzeile
  Höhe 100px
  Hintergrund orange

Am unteren Rand des sichtbaren Fensters behoben. Demo: https://codepen.io/hu0950/pen/bmBjqb?editors=1100#0

Prinzipanalyse:

• Der Wrapper wird auf Höhe: 100 % eingestellt, in der Hoffnung, dass seine Höhe unabhängig von der Menge des Inhalts der Höhe des Bildschirms entspricht. Auf diese Weise ist die Höhe des Inhalts = die Höhe des Wrappers des übergeordneten Elements - die Höhe des Fußbereichs des unteren festen Elements. Schließlich muss dem Inhalt noch „overflow: scroll“ hinzugefügt werden, damit der verborgene Teil des Inhalts auch durch Scrollen angezeigt werden kann.
• Der übergeordnete Element-Wrapper des Inhalts hat die Höhe: 100 % festgelegt, um sicherzustellen, dass bei der Berechnung der Höhe des Inhalts 100 % auf die Höhe des Bildschirms festgelegt ist und sich nicht mit der Höhe des Inhalts ändert.

CSS-Einstellungen:

html,
Körper,
.Verpackung
  Höhe 100%
.Inhalt
  height calc(100% - 100px) // Schlüssel: Benutze die Höhe, nicht die Mindesthöhe
  Überlauf scrollen // Taste ul
    Listenstil: keiner
    li
      Höhe 100px
      Hintergrund hellblau
.Fußzeile
  Position fixiert
  links 0
  rechts 0
  unten 0
  Höhe 100px
  Hintergrund orange

Abschließende Gedanken

Der Autor hat die oben genannten Implementierungsschemata im Projekt ausprobiert und für jedes Schema eine Demo bereitgestellt, um das Debuggen und Überprüfen zu erleichtern. Jede Implementierungsmethode weist einschränkende Probleme auf, z. B. die Notwendigkeit, die Fußzeilenhöhe festzulegen, oder ist nicht für Systeme mit niedriger Version auf mobilen Endgeräten geeignet. Sie können entsprechend Ihren spezifischen Anforderungen die am besten geeignete Lösung auswählen. Aufgrund der Anforderungen eines aktuellen Projekts habe ich im Internet viele Informationen eingeholt, konnte jedoch keine sofort einsatzbereite Lösung finden. Es fehlt auch eine Analyse der Implementierungsprinzipien, sodass ich diesen Artikel nach meiner eigenen Zusammenfassung und kontinuierlichen Tests geschrieben habe. Ich hoffe, es wird meinen Freunden nützlich sein. Dies ist mein erstes Goldschürferlebnis. Ich hoffe, Sie können mir Mut machen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.