Behoben (Das bleibt statisch auf Fenster scrollen) Page Blocks mit Hilfe von CSS nur

Dieser Beitrag könnte ein gutes Beispiel für die Formulierung "Teaching Oma, Eier zu saugen" zu sein ... Denn dies ist nur grundlegende CSS-Stuff. Aber für diejenigen, die blind wie ich, könnte dies ein Segen sein. Ich dachte immer, (ich könnte meinen Job verlieren, das zu sagen), war es nur möglich, einen Teil der HTML-Seite Inhalte STATIC halten (was bedeutet, bleibt seine Position, wie sie am Fenster zu scrollen), mit einigen intelligenten Skripte, mache ich all jene wissenschaftlichen Berechnungen zu finden, dynamische Position, Trapping Window.scroll Veranstaltungen und Einstellung Timeouts usw.

Hätte nie gedacht, es könnte so einfach wie diese .... Hier in der CSS / HTML unten, ich vier statischen Blöcken, ein aneinander befestigt extrimities der Seite zu haben, oben, rechts, unten und links ... Unnötig zu sagen ... Sie können eines oder mehrere auswählen, wenn es sein muss ...

CSS
. Static {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; Position: ixed;
}
# Inhalt {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; width: 100%; height: 55px;}

# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%; height: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6, rechts: 0;}

HTML
<div id="contents"> Sie Hauptseite Inhalt </ div>
<div id="wrap-b" class="static">
Static Content auf der Seite unten
</ Div>
<div id="wrap-t" class="static">
Static Content auf Seitenanfang
</ Div>

<div id="wrap-l" class="static">
Static Content auf der Seite links
</ Div>
<div id="wrap-r" class="static">
Static Content auf der Seite rechts
</ Div>

Sehen Sie sich eine Probe hier wroking


Lassen Sie eine Antwort

NDK Hause | Ausdruck ihrer IT | Ausdruck Gaumen | Penmenship Ausdruck | Ausdruck Awe | mich auszudrücken