Eine dynamisch große, klebrige Seitenleiste mit HTML und CSS

Das Erstellen einer klebrigen Seitenleiste, die sich an die Größe der Ansichtsfenster anpasst, ist mithilfe von HTML und CSS überraschend unkompliziert. position: sticky und ein Richtungsversatz (wie top: 0 ) ermöglicht eine einfache Implementierung von Funktionen wie Spannungsmenüs oder Abschnittsüberschriften. Weitere fortschrittliche klebrige Positionierungstechniken finden Sie in Ressourcen wie CSS-Tricks.

Es ergeben sich jedoch Herausforderungen, wenn Sie sich mit dynamisch großer Inhalt innerhalb des klebrigen Elements befassen. Dies kann dazu führen, dass Inhalte unter dem Ansichtsfenster versteckt werden, ein häufiges Problem, wenn die Höhe der Seitenleiste den verfügbaren Bildschirmraum überschreitet.

Ich habe dieses Problem kürzlich gestoßen, als ich ein Desktop -Layout mit einem Hauptinhaltsbereich und einer Seitenleiste mit Aktionselementen und Filtern entworfen habe. Die Seitenleiste musste beim Scrollen am Ansichtsfenster befestigt bleiben. Während das anfängliche Styling einfach war, stellte die variable Höhe des Inhalts der Seitenleiste eine Herausforderung dar. Die Verwendung von max-height und overflow-y: auto funktionierte gut auf größeren Bildschirmen, aber kleinere Ansichtsfenster ließen die Seitenleiste überlaufen.

Lösen des Problems der dynamischen Höhe

Mein anfänglicher Ansatz in Betracht gezogen, in Medienabfragen zu verwenden, um die klebrige Positionierung auf kleineren Bildschirmen zu entfernen, wodurch die Seitenleiste relativ zu seinem Behälter hergestellt wird. Die dynamische Höhe der Seitenleiste machte jedoch einen geeigneten Haltepunkt für die Medienabfrage unmöglich. Eine JavaScript -Lösung zur dynamischen Anpassung der Höhe auf der Größe der Ansichtsfenster schien übermäßig komplex und anfällig für Probleme mit der Größe der Fenstergrößen.

Eine elegantere CSS-basierte Lösung erwies sich als wirksam.

Implementierung der Lösung

Das Hauptelement verwendete Flexbox für das Layout, wobei der Seitenleiste für Desktopbreiten eine feste flex-basis zugewiesen wurde und das Artikelelement den verbleibenden Speicherplatz füllen kann. Die Flexbox Holy Albatross -Technik sorgte dafür, dass kleinere Ansichtsfenster ohne Medienfragen ein ordnungsgemäßes Stapeln stapelten. align-self: start in der Seitenleiste, verhindert, dass sich ihre Höhe mit dem Hauptartikel erstreckt.

Das Schlüssel -CSS für die klebrige Seitenleiste:

 .sidebar {
  --Offset: var (-Raum);
  / * ... */
  Position: klebrig;
  Oben: var (-Offset);
}

Dadurch wird das klebrige Verhalten mit einem oberen Offset festgelegt, der von einer CSS -benutzerdefinierten Eigenschaft ( --offset ) gesteuert wird. Diese Variable wird für einen konsistenten Abstand wiederverwendet.

Die Struktur der Seitenleistenkomponente:

 .Component {
  Anzeige: Grid;
  Grid-Template-Reihen: Auto 1FR Auto;
}

.Component .Content {
  MAX-Hoch: 500px;
  Überlauf-y: Auto;
}

Dies verwendet CSS -Gitter für ein flexibles Layout. Die max-height des Inhaltsabschnitts verhindert ein übermäßiges Wachstum, und overflow-y: auto ermöglicht das Scrollen bei Bedarf. Entscheidend im Seitenleistekontext:

 SideBar .Component {
  maximalhöhe: calc (100VH-var (-Offset) * 2);
}

Dies berechnet die max-height dynamisch basierend auf der Ansichtsfensterhöhe und dem Offset, wodurch Überlauf verhindert wird.

Dieser Ansatz erzeugt eine reaktionsschnelle, klebrige Seitenleiste, die sich an verschiedene Ansichtsfenster -Größen anpasst. Während für Desktop geeignet ist, können möglicherweise weitere Verbesserungen für kleinere Geräte erforderlich sein, z. Benutzertests leiten weitere Iterationen.

Das obige ist der detaillierte Inhalt vonEine dynamisch große, klebrige Seitenleiste mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!