position:fixed scheint vererbt zu werden :(

[Martin Fischbach]

Habe folgendes Problem: Der im 1ten div-block eingebundene 2te div-block ist in jedem Fall auch fest, d.h. ändert sich beim scrollen nicht mit, egal welche position Angabe ich mache.

<div style="
  position:fixed;
  width:800px;
  height:600px;
  //weitere Angaben zur Positionierung, wie left, top etc.
  ">

<div style="
    position:absolute;
    //position:relative oder gar keine position Angabe liefern gleiche
    //Ergebnisse
    top:200px; //200 pixel Abstand zum parent content
    height:400px; //600px (div1) minus 200px top
    widht:800px;
    //anzeige von scrollbars erzwingen, wenn inhalt zu gross
    overflow:scroll;
  ">
    <!-- content, der höher als 400px werden könnte -->

</div>

</div>

Eigentlich möchte ich soetwas wie einen iframe nachahmen, rechts von div2 ein scrollbar :)
 _________________________________
|      1ter div block 800x600     |
|      ___________________        |
|     |___________________|       |
|     |                 |x|       |
|     |    div 2        | |       |
|     |_________________|_|       |
|                                 |
|___________screen________________|

Leider scheint jedoch div2, die Eigenschaft fixed von div1 zu erben :( Was kann ich machen???

Liebe Grüße

Martin

[Thomas J.]

Tag auch

Leider scheint jedoch div2, die Eigenschaft fixed von div1 zu erben

Nein tut er nicht.
Naja irgendwie schon. Denn das position:absolute im zweiten Div bezieht sich ja schließlich auf das Elternelement.
Ich vermute, Du hast das mit Opera getestet. Nur kann Opera eben overflow:scroll nicht und schneidet deshalb den content nach 400px einfach ab.

Mit Mozilla jedenfalls funktioniert Dein Beispiel. Allerdings würde ich prozentuale Angaben und overflow:auto bevorzugen, so z.B.:
<div style="position:fixed; left:10%; top:10%; width:80%; height:80%; background:#000">
 <div style="position:absolute; left:5%; bottom:5%; width:90%; height:60%; overflow:auto; background:#ccc">
<p>Hier kommt viel Text.</p>
 </div>
</div>

Thomas J.

[Martin Fischbach]

Hi Thomas,

Leider scheint jedoch div2, die Eigenschaft fixed von div1 zu erben
Nein tut er nicht.

Doch, tut er. Dazu den <p> Bereich 30x kopiert. Dann erscheinen zwar Scrollbalken, bloß der gesamte Text bleibt fest (zumindest Netsscape macht es so)
Was ich nicht bedacht habe: Für div1 einfach position:absolute nehmen, dann kommt genau das raus, was ich will :))
Sprich div1 bleibt fest und div2 erzeugt keinen Scrollbalken für die gesamte Seite durch overflow:auto (scroll). Dadurch bleibt auch div1 fest.

.... bloß leider macht Opera Mucken! Sprich stellt keine Scrollbalken dar und div2 wird komplett dargestellt, es erscheinen scrollbalken und auch div1 scrollt dann :((
Gibts dafür noch ne Lösung?? Bitte keine iframes, frames =:)

Ich vermute, Du hast das mit Opera getestet. Nur kann Opera eben overflow:scroll nicht und schneidet deshalb den content nach 400px einfach ab.

Ja, s.o. :(

Mit Mozilla jedenfalls funktioniert Dein Beispiel. Allerdings würde ich prozentuale Angaben und overflow:auto bevorzugen, so z.B.:
<div style="position:fixed; left:10%; top:10%; width:80%; height:80%; background:#000">
<div style="position:absolute; left:5%; bottom:5%; width:90%; height:60%; overflow:auto; background:#ccc">
<p>Hier kommt viel Text.</p>
</div>
</div>

Ja, wenn man position:fixed für position:absolute verwendet!

Danke erstmal für Deine Mühe

Hier nochmal der source, wie er funktioniert: (wird in IE5.5 (6?) und Netscape 7 richtig dargestellt)

<div style="
  position:absolute;
  left:10%;
  top:10%;
  width:800px;
  height:80%;
  background:#000">
  <div style="
    position:absolute;
    left:0%;
    bottom:0%;
    width:100%;
    height:60%;
    overflow:auto;
    background:#ccc">
    <p>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>
      Hier kommt viel Text.<br/>

</p>
 </div>
</div>

Wenn jemand eine Idee hat, wie das auch mit Opera klappt, dann bitte melden!

Danke und liebe Grüße

Martin