Problem:
Sie haben Probleme um den Inhalt einer Webseite zentral auszurichten und gleichzeitig ein bestimmtes DIV mithilfe des Hauptmenüs des Browsers scrollbar zu machen Bildlaufleiste.
Ziel:
Erstellen eines horizontal zentrierten Layouts mit einem Hauptinhalt auf der linken Seite, der durch die Hauptbildlaufleiste des Browsers vertikal scrollbar ist, und einer festen Seitenleiste auf der rechten Seite oben und kann nur gescrollt werden, wenn die Maus darüber fährt.
Während die Da Gizmodo beispielsweise Skripte für die Handhabung der Seitenleiste enthält, kann der gewünschte Effekt mit reinem CSS erzielt werden. Die Lösung umfasst:
CSS:
html, body, * { padding: 0; margin: 0; } .wrapper { min-width: 500px; max-width: 700px; margin: 0 auto; } #content { margin-right: 260px; /* = sidebar width + some white space */ } #overlay { position: fixed; top: 0; width: 100%; height: 100%; } #overlay .wrapper { height: 100%; } #sidebar { width: 250px; float: right; max-height: 100%; } #sidebar:hover { overflow-y: auto; } #sidebar>* { max-width: 225px; /* leave some space for vertical scrollbar */ }
Markup:
<div class="wrapper"> <div>
Sowohl der Hauptinhalt als auch die Breite der Seitenleiste können nach Wunsch konfiguriert werden. Beachten Sie, dass die Seitenleiste kein untergeordnetes Element des Scroll-Containers des Hauptinhalts ist, um ein Aufsprudeln des Scroll-Ereignisses aus der Seitenleiste zu verhindern. Dies ermöglicht separate Scrollverhalten.
Diese Lösung bietet ein zentralisiertes Layout mit unabhängigen Scrollfunktionen für Hauptinhalt und Seitenleiste, wobei die Hauptscrollleiste des Browsers für den Hauptinhalt verwendet wird.
Das obige ist der detaillierte Inhalt vonWie mache ich ein bestimmtes DIV mithilfe der Hauptbildlaufleiste des Browsers scrollbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!