c--: Div-Scrollbars funktionieren nicht, wenn Parent relativ!?

Beitrag lesen

Ich habe ein Div-Element mit Scrollbars.

also mit overflow:scroll oder overflow:auto.

Ja - wie im Codeschnippsel aus dem 1. Post.

Das Div selbst hat eine relative Größe (width:100% - heigth:100%).

Es ist damit also genau so groß wie sein Elternelement.

Das will ich erreichen - habe es aber bislang nur geschafft, wenn body das Elternelement ist.

Sobald aber das Div nicht mehr direkt auf oberster Ebene im body liegt, sondern in einem Parent-Control, funktioniert "overflow:scroll" nicht mehr. Stattdessen wird das Div so groß gemacht, dass der gesamte Inhalt hineinpasst.

Das ist ein Missverständnis. Mit dem overflow hat das nichts zu tun, sondern damit, dass eine klare Größenangabe fehlt.

Ich wäre der Meinung, die Angaben height:100% und width:100% für das Parent-Control wären "klare Größenangaben"?
Dieses Parent-Control wäre in meinem Codeschnippsel eben die blinde Tabelle.

Wenn das div-Element direktes Kind von body ist, hast du also in etwa sowas:

<html>

<head>
...
</head>
<body>
  <div>
  Langer, langer Text, viel anzuzeigen ...
  </div>
</body>
</html>


>   
> Und dazu mindestens  
>   
> ~~~css

html, body  

>  { height: 100%;  
>  }  
> div  
>  { height: 100%;  
>    width:  100%;  
>    overflow: scroll;  
>  }

Ja, wie gesagt - wenn body das Elternelement ist, dann geht's ja.

Obwohl ich dem Div eine Höhe von 100% vorgegeben habe, wird es so groß, dass der gesamte Inhalt hineinpasst (widerspricht dem Sinn der Scrollbars).

Das liegt vermutlich daran, dass die Tabelle und die Zeilen darin keine Höhenangebe haben. Also soll das div-Element 100% der Höhe der Tabelle haben, die Tabelle richtet ihre Höhe aber automatisch nach dem Inhalt.

Nein, die Tabelle hat eine Höhenangabe - siehe wieder Codeschnippsel (1. Post). Und zwar eine relative - 100%.

Wenn ich das Parent-Control (die blinde Tabelle) entferne, sodass das Div eben auf oberster Ebene liegt, dann funktioniert es - es ist dann tatsächlich 100% groß (wie vorgegeben) und die Scrollbars lassen sich benutzen.

Eben, dann ist body das Elternelement, auf das sich die 100% beziehen.

Ja - aber wenn sich die 100% auf die Tabelle beziehen, geht's nicht mehr.

Wozu brauchst du dann die Tabelle, wenn sie 100% der Höhe und der Breite annehmen soll und nur ein einziges div als Inhalt hat? Das ist absurd.

Wie ich bereits irgendwo geschrieben habe, ist der Codeschnippsel im 1. Post nur ein nachgebautes Beispiel, um mein Problem zu demonstrieren.
Das Problem habe ich unter anderem auf einer Seite, wo es zwar tatsächlich eine solche 100%-Tabelle gibt. Allerdings nutze ich deren Felder, sie ist also nicht blind.

  • Und wie hast du die Höhen der Elemente festgelegt? Codeauszug (HTML/CSS)?

Ich bekomme den Eindruck, dass mein Codeschnippsel im 1. Post auf dieser Seite nicht ausreichend/zielführend ist. Ich weiß nur im Moment nicht genau, wie ich das Beispiel umschreiben soll.
Wenn man diesen Schnippsel in eine Textdatei kopiert, die man z.B. test.html nennt und diese in einem verkleinerten Browserfenster öffnet, sollte man doch recht deutlich sehen, dass das Div größer als 100% ist?

Sicherlich kann man in den meisten Fällen, wo man früher solche Tabellen verwendet hat, Divs benutzen.

Warum? HTML hat noch mehr Elemente als nur Tabellen und div. Nutze sie! Nutze die Elemente, die die Struktur des Inhalts am besten wiedergeben! Tabellen sind dann zur Gestaltung bzw. zum Layouten völlig unnötig, divs meistens auch. Ab und zu setzt man mal eins ein, um andere Elemente zu einem Block zu gruppieren.

Okay, ich danke für den Hinweis.