Seitenlayout / div-höhe

    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...

    So sieht das Ding aus:

    HTML
    <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.

    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.

    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.

    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).

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!

Benutzerkonto erstellen Anmelden