nicht angemeldet
Der MartinHallo,
Ich habe ein Div-Element mit Scrollbars.
also mit overflow:scroll oder overflow:auto.
Das Div selbst hat eine relative Größe (width:100% - heigth:100%).
Es ist damit also genau so groß wie sein Elternelement.
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. 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
html, body
{ height: 100%;
}
div
{ height: 100%;
width: 100%;
overflow: scroll;
}
In meinem Beispiel im 1. Post ist die blinde Tabelle das Parent-Control. Darin liegt das Div.
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.
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.
Nach meinem Verständnis müsste es immer 100% hoch sein, also 100% vom verfügbaren Platz (und nicht mehr!!) in Anspruch nehmen. Dieser verfügbare Platz wiederum ist das innere der blinden Tabelle, die auch wieder 100% hoch ist - 100% vom verfügbaren Platz im Browserfenster.
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. - Und wie hast du die Höhen der Elemente festgelegt? Codeauszug (HTML/CSS)? Oder noch besser, ein Online-Beispiel?
Wolltest du mir sagen, dass ich auf sämtliche blinde Tabellen verzichten soll?
Ja. Wollte er.
Na ja, das hat ja nicht viel mit dem Thema zu tun ...
Indirekt schon - aber dasselbe Problem hättest du, wenn es beispielsweise ein from-Element anstatt der Tabelle wäre. Die Kette der Höhenangaben ist unterbrochen.
aber blinde Tabellen sind doch nicht falsch?
Aber sinnlos.
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.
Aber solange man gut lesbaren und W3C-konformen Code schreibt, dürfte doch nichts gegen Tabellen sprechen?
Doch, "gut lesbar" und "Tabellen" widersprechen sich eigentlich.
So long,
Martin
Der Gast geht solange zum Tresen, bis er bricht.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
suit