scrollbare div

[sw0ce]

Hallo zusammen,

Bin noch nicht sehr lange mit Html am arbeiten und habe eine anfängerfrage.
ich habe ein Problem mit einem scrollbaren Div, welches in der Höhe dynamisch sein soll. Eigentlich kein großes Problem dachte ich, mit festen Höhen ist es das auch nicht, allerdings mit dynamischen.

Aufbau meines Html-docs:
Header(Banner) mit fester Höhe: height: 150;
Body: direkt unter dem Header, Dynamische Höhe, so das die Seite immer an den Bildschirm angepasst ist und Header, Body und Footer in voller Höhe zu sehen sind: height: 100%;
Footer: Feste Höhe: height: 100;

Hier mein Html Code:

<table width="100%" height="100%">
   <tr valign="top" height="150">
    <td>
     <table height="150" width="100%" > 
      <tr>
       <td bgcolor="black">
        <font color="white">Banner</font>
       </td>
      </tr>
     </table>
    </td>
   </tr>
   <tr height="100%">
    <td>
     <table width="100%" height="100%"> 
      <tr valign="top">
       <td bgcolor="blue" width="200">
        <table border="1" width="100%" >
         <tr>
          <td border="1" width="100%" align="center">
            <font color="white">Menupunkt 1</font>
          </td>
         </tr>
         <tr>
          <td border="1" width="100%" align="center">
            <font color="white" align="center">Menupunkt 2</font>
          </td>
         </tr>
         <tr>
          <td border="1" width="100%" align="center">
            <font color="white">Menupunkt 3</font>
          </td>
         </tr>
         <tr>
          <td>
          </td>
         </tr>
        </table>
       </td>
       <td bgcolor="white">
        <div class="scrollen">
          <?php include("text.html"); ?> 
        </div>
       </td>
       <td bgcolor="blue" width="200">
         <font color="white">right bar</font>
       </td>
      </tr>
     </table>
    </td>
   </tr>
   <tr valign="bottom" height="100">
    <td>
     <table height="100" width="100%"> 
      <tr>
       <td bgcolor="black">
        <font>Footer</font>
       </td>
      </tr>
     </table>
    </td>
  </tr>
</table>

Im Body möchte ich nun das in der Mitte der Inhalt dynamisch scrollbar wird, flas der Inhalt zu groß wird, soll er gescrollt werden. Hierzu habe ich vollgendes css verwendet:

<style type="text/css">
    <!-- 
     .scrollen {overflow: auto; height: 99%}
    -->
   </style>

Bei % Angabe zieht er den Inhalt allerdings immer auf die gesamte Höhe des Inhalts, bei relativen angaben in px macht er es richtig, allerdings nicht dynamsich..

Kann mir jemand sagen wie es richtig mache? (Hoffe ihr habt überhaupt verstanden was ich von euch will)

Gruß dataxman

 

[_Thor_]

Deine Tabelle ist völliger Quatsch. Tabellen sind für die Auszeichnung von tabellarischen Daten zuständig, nicht fürs Layout. Layout wird per CSS gemacht.

Ein header ist eine Überschrift erster Ordnung

<h1>header</h1>

Farbe, Schriftgröße, Hintergrundbild etc wird per CSS definiert.

Vielleicht hilft dir dies hier weiter Layout mit 100 % Höhe bei fixiertem Header und Footer

 

[raumlaeufer]

Hallo,

versuche es doch mal mit js. Höhe des Broiwserfensters erfragen Headergröße und Footergröße abziehen und dann Differenz als absolute Größe dem div zuweisen ...

vielleicht klappt's

Aber vorher nochmal HTML überarbeiten (CSS-Layouts dreispaltig mit Kopf und Fuß gibt's bei selfhtml)

LG raumlaeufer