Der Martin: DIV mit prozentualer Höhe funzt nicht

Beitrag lesen

Hi,

<div style='width:100%; height:100%; border:1px solid #f00'>

<div>blah<br>bla<br>bla<br>bla</div>
  <div id='fenster' style="width:600px; overflow:auto; border:1px solid #00f">
    <div id='uebergross'>blah<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
    bla<br>bla<br>bla<br>bla</div>
  </div>
</div>

  
bitte markiere HTML-Code auch als HTML, nicht als CSS. Das bringt sonst das Syntax-Highlighting durcheinander.  
  

> <div id='fenster' hat einen horizontalen Scrollbalken, weil ich die Breite mit 600px angebe  
  
Das eine hat mit dem anderen nichts zu tun. Der horizontale Scrollbalken erscheint nicht wegen der Breitenangabe, sondern weil der tatsächliche Inhalt mehr als die definierte Breite braucht.  
  

> aber einen vertikalen Scrollbalken gibt es nicht. Stattdessen dehnt der "übergroße Inhalt" den äußeren div auf über 100% Höhe aus.  
  
Logisch, du machst ja auch keine Angabe zur Höhe von div#fenster, also wird es so hoch, wie der Inhalt erfordert. Dass das äußere div mitwächst, ist normal - wenn du dem 100% Höhe gibst, solltest du wissen, worauf sich diese 100% beziehen. Nämlich auf dessen Elternelement. Du definierst also: Das äußere div-Element soll 100% der Höhe seines Elternelements einnehmen.  
Was aber ist dessen Elternelement? Das geht aus deinem Codeauszug nicht hervor. Möglicherweise ist es das body-Element. Hat das auch eine explizite Höhe? Falls nein, richtet sich dessen Höhe wieder nach dem Inhalt.  
  

> Wie kann ich vermeiden, dass die ganze Seite einen Scrollbalken bekommt? ich möchte den Header stehen lassen, nur das 'fenster' soll gesrollt werden.  
  
Vermutlich kannst du auf einige deiner div-Container verzichten. Hat dein Header eine feste Höhe? Dann setze die auch explizit, positioniere den Header absolut, und gib dem body-Element einfach ein padding-top, das exakt der Höhe des Headers entspricht. Ein zusätzliches Containerelement brauchst du dann nicht mehr.  
Achte dann darauf, dass sowohl body als auch dessen Elternelement html eine Höhe von 100% haben, und du solltest deinem Ziel schon recht nahe sein.  
  
So long,  
 Martin  

-- 
"Drogen machen gleichgültig."  
 - "Na und? Mir doch egal."  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(