fixed div mit Scrollfunktion

[MichaA]

Ich habe ein einfaches Beispiel:

http://jsfiddle.net/BxLGg/

Ich möchte einen fixen Header Bereich haben und einen scrollbaren Content-Bereich. Leider lässt sich im Content-Bereich nicht mehr scrollen, sobald ich ihn fix mache. Kann mir einer erklären, was ich falsch mache?

 

[ikosaeder]

Du musst das

position:fixed

aus dem Content entfernen und statt dessen ein

padding-top:60px;

einfügen.
http://jsfiddle.net/BxLGg/3/

 

[MichaA]

Das hat den Nachteil, dass der Text hinter den Header scrollt. Damit könnte man zwar leben, aber wenn im Content-Text Anker drin sind, z.B. wenn man von einer Inhaltsverzeichnis direkt auf den Punkt springen möchte, dann ist dieser angesprungene Punkt hinter dem Header... also nicht sichtbar. Ich muss den Content-Bereich schon nach unten versetzen.

 

[SpiceLab]

http://jsfiddle.net/spicelab/BxLGg/5/

 

[MichaA]

Das ist leider auch nicht die Lösung. Ich habe mein Beispiel mal so angepasst, dass man das Problem deutlicher sieht. Bei Spicelabs Lösung scrollt der Text auch hinter den Header, weshalb Abschnitt1 nicht korrekt angesprungen werden kann.

http://jsfiddle.net/BxLGg/6/

 

[SpiceLab]

Sorry. Der Browser "platziert" die Sprungmarken nunmal am oberen Fensterrand, und berücksichtigt dieses CSS-Gebilde hierbei nicht.

 

[MichaA]

Ich habe die Lösung:

http://jsfiddle.net/BxLGg/10/

Das Problem war, dass ich beim content Div noch ein Bottom: 0 angeben musste. Ohne dies funktioniert es nicht.

 

[SpiceLab]

Sorry. Der Browser "platziert" die Sprungmarken nunmal am oberen Fensterrand, und berücksichtigt dieses CSS-Gebilde hierbei nicht.

Aber so: http://jsfiddle.net/spicelab/BxLGg/11/

 

[SpiceLab]

Ich habe die Lösung:

http://jsfiddle.net/BxLGg/10/

Das Problem war, dass ich beim content Div noch ein Bottom: 0 angeben musste. Ohne dies funktioniert es nicht.

Sorry. Der Browser "platziert" die Sprungmarken nunmal am oberen Fensterrand, und berücksichtigt dieses CSS-Gebilde hierbei nicht.

Aber so: http://jsfiddle.net/spicelab/BxLGg/11/

Zwei User, ein Gedanke

 

[MichaA]

Jupp, kamen wir nahezu zeitgleich drauf. Danke für deine Mühen.