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!