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!