So verwenden Sie CSS -Gitter für klebrige Header und Fußzeilen

CSS Grid vereinfacht das Weblayout erheblich. Während es eine Lernkurve gibt, macht es seine intuitive Natur angenehm, zu verwenden, insbesondere für die Verwaltung von Headern und Fußzeilen. Dieses Tutorial zeigt, dass sowohl feste als auch klebrige Fußzeilen mit CSS -Raster erstellen. Rachel Andrews "Das neue CSS -Layout" wird für einen tieferen Eintauchen in Gitter und Flexbox sehr empfohlen.

Projektübersicht

Wir werden ein klassisches HTML -Layout mit einem Kopfball, Hauptinhalt und Fußzeile erstellen. Wir werden zwei Fußzeile Variationen implementieren: eine feste Fußzeile, die unabhängig von der Inhaltslänge am Rande des Ansichtsfensters bleibt, und eine herkömmliche Klebzigkeit, die nach unten hält, aber durch längere Inhalte abgeschoben wird. Der Hauptinhaltsbereich wird anpassungsfähig sein und sich über die volle Ansichtsfensterbreite oder die zentrale Rolle in einer definierten Breite erstrecken.

Feste Fußzeilen sind zwar seltener als klebrige Fußzeilen, werden von Stellen wie Charles Schwab verwendet. Ihre Implementierung beinhaltet häufig hartcodierte Größen und Paddings. Unser Ansatz vermeidet diese Einschränkungen und nutzt die Flexibilität von CSS Grid.

Untersuchen Sie vor dem Fortfahren die feste Fußzeile der Charles Schwab Homepage. Durch die Überprüfung des Codes in Devtools wird eine hart codierte Höhe und Positionierung angezeigt.

Lassen Sie uns einen ähnlichen Effekt ohne diese Einschränkungen erzielen.

Anfangsstile

Wir beginnen mit einer minimalen Benutzeroberfläche und verbessern sie allmählich mit CSS -Netz. Eine Codesandbox (und nachfolgende Iterationen) liefert interaktive Beispiele.

Zunächst stellen wir sicher, dass die volle Höhe des Ansichtsfensatzes verwendet wird:

 Körper {
  Rand: 0; / * verhindert Scrollbars *//
}

#app {
  Höhe: 100VH;
}

Als nächstes definieren wir die Header-, Haupt- und Fußzeilenabschnitte und ihre Gitterstruktur. Diese anfängliche Struktur funktioniert noch nicht wie beabsichtigt. Es dient als Grundlage:

 Körper {
  Rand: 0;
}

#app {
  Höhe: 100VH;

  / * Grid Container -Einstellungen *//
  Anzeige: Grid;
  Grid-Template-Säulen: 1fr;
  Grid-Template-Reihen: Auto 1FR Auto;
  Grid-Template-Areas:
    "Kopfball"
    'hauptsächlich'
    'Fußzeile';
}

#App> Header {
  Gitterfläche: Kopfball;
}

#App> Main {
  Gitterfläche: Haupt;
  Polsterung: 15px 5px 10px 5px;
}

#App> Fußzeile {
  Gitterfläche: Fußzeile;
}

Dies schafft ein Einspalten-Layout. 1fr bedeutet "den verbleibenden Platz nehmen", was zu Spalten mit voller Breite führt. Die Zeilen werden mit auto (für Header und Fußzeile) und 1fr (für den Hauptinhalt zum Füllen des verbleibenden Platzes) dimensioniert. Es sind keine hartcodierten Höhen erforderlich.

Inhaltsintegration

Die bereitgestellte Codesandbox verwendet React für Demonstrationszwecke, aber die CSS -Gitterprinzipien bleiben unabhängig vom Rahmen. Header-, Haupt- und Fußzeilenkomponenten machen die jeweiligen HTML -Elemente. Abschnitte für die Abrechnungs- und Einstellungen liefern Beispielinhalte und demonstrieren die Anpassungsfähigkeit des Layouts.

Das anfängliche Layout zeigt einen funktionalen Abschnitt "Abrechnungs", aber "Einstellungen" drückt die Fußzeile außerhalb des Bildschirms. Das Scrollen wirkt sich auf die gesamte Seite aus, wodurch der Header verschwindet. Lassen Sie uns dies ansprechen.

Fester Header und Fußzeile

Die Höhe 100vh und auto / 1fr -Zeile verursacht zunächst Probleme, wenn der Inhalt das Ansichtsfenster überschreitet. Hinzufügen von overflow: auto zur<main></main> Das Element ermöglicht das Scrollen innerhalb des Hauptinhaltsbereichs, wodurch die Header und die Fußzeile repariert werden:

 #App> Main {
  Gitterfläche: Haupt;
  Überlauf: Auto;
  Polsterung: 15px 5px 10px 5px;
}

Diese aktualisierte Demo löst die Scrollen- und Sichtbarkeitsprobleme.

Einstellbare Hauptabschnittsbreite

Um den Hauptinhalt innerhalb einer Breite von 600 PX zu zentrieren oder das vollständige Ansichtsfenster zu überspannen, nisten wir ein Netz im Inneren<main></main> . Damit werden drei Spalten ( 1fr 600px 1fr ) verwendet, wodurch der Abschnitt 600px effektiv zentriert wird.

 #App> Main {
  Anzeige: Grid;
  Grid-Template-Reihen: 1FR;
  Grid-Template-Säulen: 1fr 600px 1fr;
}

Der Inhalt wird mit Gitterkoordinaten positioniert. Eine .full Klasse ermöglicht es den Inhalt, die gesamte Breite zu überspannen:

 #App> Abschnitt {
  Gitterfläche: 1/2 / 1/3;
}

#App> Abschnitt.fulll {
  Gitterfläche: 1 / 1/1/4;
}

Beachten Sie die Verwendung von Gitterlinien (vier Zeilen für drei Spalten). Durch das Schrumpfen des Ansichtsfensters wird ein Abfallproblem mit der festen 600px -Breite angezeigt. minmax(0, 600px) löst dies, sodass die Breite bis zu 600 PX einstellen kann:

 hauptsächlich {
  Anzeige: Grid;
  Grid-Template-Reihen: 1FR;
  Grid-Template-Säulen: 1fr Minmax (0, 600px) 1FR;
}

Die endgültige Demo zeigt dieses reaktionsschnelle Verhalten.

Traditionelle klebrige Fußzeile

Um eine traditionelle klebrige Fußzeile zu erstellen, modifizieren wir die Netzstruktur. Der<main></main> Das Element enthält nun die Fußzeile in seinem Netz:

<div>
  <header></header>
  <main>
    <section></section>
    <footer></footer>
  </main>
</div>

Das #app -Netz wird aktualisiert, um zwei Zeilen zu haben:

 #app {
  / * wie früher */
  Grid-Template-Säulen: 1fr;
  Grid-Template-Reihen: Auto 1fr;
  Grid-Template-Areas:
    "Kopfball"
    'hauptsächlich';
}

Der<main></main> Das Gitter wird angepasst, um die Fußzeile einzuschließen:

 #App> Main {
  Anzeige: Grid;
  Grid-Template-Reihen: 1FR Auto;
  Grid-Template-Säulen: 1fr Minmax (0, 600px) 1FR;
}

Fußzeile Positionierung in diesem Netz:

 #App> Fußzeile {
  Gitterfläche: 2 /1 / 3/4;
}

Mit diesem Setup kann der Fußzeile durch Inhalte innerhalb des Inhalts heruntergedrückt werden<main></main> Erstellen des gewünschten Sticky Fout -Foot -Effekts. Es wurden geringfügige Polsteranpassungen vorgenommen, um eine ordnungsgemäße Ausrichtung zu gewährleisten. Die letzte Demo zeigt dieses Verhalten. Auf das Abschnittselement wurde ein zusätzliches Styling angewendet, damit horizontales Scrollen innerhalb des Inhaltsbereichs beibehalten wurde, während das vertikale Layout beibehalten wurde.

Abschluss

Während die nachgewiesenen Techniken ohne CSS -Netz erreichbar sind, bietet Grid eine einheitliche und elegante Lösung. Seine Flexibilität und Benutzerfreundlichkeit, wie der einfache Übergang von einem festen Footzelf festgelegt wird, machen es zu einem leistungsstarken Werkzeug für komplexe Layouts. Die vorgestellten Beispiele sind relativ einfach und zeigen das Potenzial des CSS -Netzes für ehrgeizigere Projekte.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS -Gitter für klebrige Header und Fußzeilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!