Linearer Modus

YAL · 10.10.2009 17:05

Hallo zusammen,
Ich habe eine Website, die aus ein wenig Text in der oberen Hälfte und einer Tabelle, die beliebig groß werden kann, besteht.
Jedoch soll nur die Tabelle scrollbar sein, das heißt praktisch die Tabelle in einen DIV-container zu Packen, der nur bis zum Seitenende reicht. Die Größenangabe 100% höhe hilft nicht weiter, das Ding verlässt die Seite. Hat jemand Idee, wie ich das mittels CSS realisieren kann?
BTW: Frames wären dafür wie geschaffen, aber...

Benedikt · 10.10.2009 17:07

CSS: overflow: scroll;

http://www.css4you.de/overflow.html

YAL · 10.10.2009 17:09

Benedikt schrieb: CSS: overflow: scroll;

http://www.css4you.de/overflow.html

Habsch schon drinne, geht nich. Der container wächst immer über den unteren Rand hinaus.

Code:

width:100%; height: 100%; border: 1px solid black; overflow:scroll;

gandro · 10.10.2009 17:12

Doch, doch, das funktioniert schon - ggf. overflow: auto. Kannst du etwas mehr Code zeigen?

YAL · 10.10.2009 17:22

So sieht das Ding aus:

Code:

<html>

<body>

bla

<br />

bla

<div id="tablecont" style="width:100%; height: 100%; border: 1px solid black; overflow:auto;">

seeehr langer text....

</div>

</body>

</html>

Eigentlich sollte das Browserfenster keinen Scrollbalken bekommen, nur das div. Jedoch bekommen immer beide Scrollbalken.

pETe! · 10.10.2009 17:29

Versuch mal für die Höhe einen absoluten Wert einzugeben. Im zweifelsfall musst du die reale Höhe mit Javascript abfragen, heigth:100% funktioniert nie so, wie man es gerne hätte

YAL · 10.10.2009 17:34

Das wäre nur die Notlösung: Was ist wenn der Nutzer ne riesige Schriftgröße hat, o.ä.?

pETe! · 10.10.2009 17:56

Dann wird es trotzdem noch einen Scrollbalken geben, in beiden Lösungen.
Oder du willst was anderes, dann erklär bitte noch mal genau, was du vor hast.

Du kannst natürlich auch Body auf "Scrolling: no" stellen, aber das ist noch schlimmer.

YAL · 10.10.2009 18:02

Ja ne, wenn ich beim onload und beim oresize event die Höhe auf window.innerHeight-konstante setze, so habe ich das Problem, dass die Höhe des Containers bei abweichender Größe (browserabhängig) des darüber liegenden Inhalts nichtmehr passt.

gandro · 10.10.2009 18:43

Ach so meinst du das.

Das ist leider nicht ganz einfach zu lösen.

Erstmal:
"height: 100%" bezieht sich auf das Elternelement, in diesem Falle also <body> und heisst in dem Falle: So hoch wie der HTML-Bereich des Browserfensters. Da aber innerhalb von <body> ja noch "bla bla" steht, ist die Höhe von <body> dann Grösse von "blabla" + Grösse von <div style"height=100%">.
"width: 100%" kannste bei Block-Elementen wie <div> überigens getrost weglassen.

Zum eigentlichen Problem:
Über Javascript ist unschön, würd ich vermeiden. Das Hauptproblem bei CSS ist, dass man sich leider nicht an der Höhe anderer Elemente orentieren kann.

Du musst also entweder die Höhe selber aufteilen:

Code:

<div style="height: 20%;">blabla</div>

<div id="tablecont" style="height: 80%; overflow: scroll;">seeehr langer text....</div>

oder ggf. den Text am Anfang irgendwie oben behalten (bzw. alternativ die Tabelle unten), über nen "position: fixed" (oder "absolute", wenn Tabelle unten), dann hast du den Scrollbalken allerdings im body und musst die Höhe eines Elementes fest definieren.
Oder, wenn du <table> verwendest, die Beschreibung im <thead> und diesen dann fixieren (funktioniert aber meines Wissens nicht im IE).