DIV mit prozentualer Höhe funzt nicht

[Gast]

Hallo,

auf meiner Seite habe ich einen div-header mit unbestimmter Höhe (wird vom Inhalt bestimmt) und darunter möchte ich den Rest der Seitenhöhe nutzen für einen <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=Elementbereich mit übergroßem Inhalt>.

<div id='fenster' hat einen horizontalen Scrollbalken, weil ich die Breite mit 600px angebe, aber einen vertikalen Scrollbalken gibt es nicht. Stattdessen dehnt der "übergroße Inhalt" den äußeren div auf über 100% Höhe aus.

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

Wie kann ich vermeiden, dass die ganze Seite einen Scrollbalken bekommt? ich möchte den Header stehen lassen, nur das 'fenster' soll gesrollt werden.

Gruß, Gast

[Der Martin]

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:(

[Gast]

Hallo, Martin

Vermutlich kannst du auf einige deiner div-Container verzichten. Hat dein Header eine feste Höhe?

Kommt auf die Breite des Fensters an. Bei schmalem Fenster kann sich ein ungeplanter Zeilenumbruch ergeben, der die Höhe vergrößert. Also nein.

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.

Ja, so mache ich es normalerweise, aber ich wollte die Alternative ausprobieren, ein "Fenster" zu definieren wie http://de.selfhtml.org/css/eigenschaften/anzeige/overflow.htm@title=hier.

Zusammenfassung:

Navi-Header belegt eine unbekannte Höhe x%. Im Rest der Viewporthöhe, also 100% -x% möchte ich einen scrollbaren Container haben.

Geht das?

Grüße, Gast

[Der Martin]

Hi,

Zusammenfassung:
Navi-Header belegt eine unbekannte Höhe x%. Im Rest der Viewporthöhe, also 100% -x% möchte ich einen scrollbaren Container haben.

Geht das?

leider nicht mit CSS allein. Da wirst du wohl mit Javascript nachhelfen müssen: Tatsächliche Höhe des Headers auslesen, diesen Wert als top oder padding-top des Haupt-Containers setzen.
Nicht vergessen, das auch bei einer Größenänderung des Browserfensters zu wiederholen.

Ciao,
 Martin