benneque: Div mit fester Größe, ABER gleichzeitig ausdehnbar

Hallo!

Ich Schussel habe meine CSS Datei wegen Versuchen umgeschrieben, gespeichert und geschlossen... Jetzt bekomm ich mein altes Ergebnis nicht mehr hin.

Also im Großen und Ganzen ist es nur ein einziges DIV-Element. Die Seite sieht (bzw. eher sah(!)) wie folgt aus:

  
---------------  
|    MENÜ     |  
|-------------|  
|             |  
|  CONTENT    |  
|             |  
|             |  
|--------------

Das Menü ist oben einfach zentriert mit position:absolute; und top: 1em; . Hier soll es nun aber um den CONTENT-Bereich gehen. Ich weiß nicht mehr, ob es 1 DIV allein oder 2 ineinander geschachtelte waren. Ich weiß nur, dass es vollkommen ohne JavaScript funktioniert hat.

Also wie folgt:
CONTENT beginnt unterhalb des Menüs (ich glaub es war grob top:5em;), dazu natürlich auch zentriert. Jetzt kommt aber das eigentlich spannende:
Wenn der Inhalt von CONTENT nur wenige Zeilen lang war, dann ging es trotzdem bis an den unteren Rand des Fensters (also quasi bottom:1em). Das ist auch jetzt kein Problem zu reproduzieren, aber nun aufgepasst: Wenn der Inhalt größer als das Fenster selbst wurde, dann gab's den guten alten Scrollbalken UND die Div-Class hat sich mit dem Inhalt vergrößert.

Kann mir einer verraten, wie ich das angestellt habe? Ich wäre euch sehr verbunden.

Grüße!!

  1. Om nah hoo pez nyeetz, benneque!

    Ich weiß nicht mehr, ob es 1 DIV allein oder 2 ineinander geschachtelte waren.

    Das hat mit deinen Spielereien an der CSS-Ressource nichts zu tun.

    Kann mir einer verraten, wie ich das angestellt habe? Ich wäre euch sehr verbunden.

    nein, nur raten. Zeig uns die Seite.

    Matthias

    --
    1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. Keine Ahnung, ob's hilft:
      http://benneque.bplaced.net/Page.html

      Pure GWT ;)

      Om nah hoo pez nyeetz, benneque!

      Ich weiß nicht mehr, ob es 1 DIV allein oder 2 ineinander geschachtelte waren.

      Das hat mit deinen Spielereien an der CSS-Ressource nichts zu tun.

      Kann mir einer verraten, wie ich das angestellt habe? Ich wäre euch sehr verbunden.

      nein, nur raten. Zeig uns die Seite.

      Matthias

  2. Ich hab's wiedergefunden! YEAH!

    Einfach mal das Fenter größer und kleiner machen. Das Div wird nie kleiner als der Text geht aber mindestens bis 1em über Kante unten.

    Code:

      
    <html>  
    <head>  
    <style>  
    #outta {  
    top: 5em;  
    position: absolute;  
    margin: 0 5em;  
    left: 0;  
    right: 0;  
    bottom: 2em;  
    min-width: 700px;  
    display: block;  
    }  
      
    #inna {  
    width: 100%;  
    position: absolute;  
    min-height: 100%;  
    background-color: grey;  
    border: 4px solid #600000;  
    }  
    </style>  
    </head>  
      
    <body>  
    <div id="outta">  
    <div id="inna">  
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test  
    </div>  
    </div>  
    </body>  
    </html>