overflow:auto - Positionierung bottom wenn zuwenig Inhalt zum Scrollen

[ppluech]

Hmmm, ich fürchte, ich habe da irgendwo einen Knoten in meinen Hirnwindungen :)

Folgendes Problem: Ich habe einen Bereich der Größe 400x400px auf meiner Webseite. Dieser hat je nach Seite einen variablen Inhalt. Mit "overflow:auto" ist es nun kein Problem, dass der Inhalt mitscrollt. Allerdings ist es gewünscht, dass der Inhalt unten ausgerichtet ist. Sprich: habe ich nur eine Zeile Inhalt so soll diese am unteren Rand stehen. Der Inhalt soll also von unten nach oben und nicht von oben nach unten in das div laufen.
Nun stehe ich vor dem Problem: um den Inhalt scrollbar zu machen benutze ich "overflow:auto", zur Positionierung des Inhalts unten benutze ich "position:absolute; bottom: 0;" allerdings funktioniert je nachdem immer nur das eine oder das andere. Ich bekomme es nicht hin: wenn wenig Inhalt unten, wenn viel Inhalt Scrollbalken (Positionierung ist quasi egal, das Fenster ist eh voll ;) )

Ich hoffe es ist eingermaßen verständlich was ich meine.

Gibt es da eine Patentlösung? Übersehe ich irgendwas? Kann mir irgendwer helfen? :)

#mainLeft {
    position: relative;
    float: left;
    width: 400px;
    height: 400px;
    overflow: auto;
}
#mainLeft .scroll-content {
    position:absolute;
    bottom:0;
    width: 400px;
}

<div id="mainLeft">
    <div class="scroll-content">
        <p>
            Inhalt
        </p>
        <div class="bar">Abschlusselement</div>
    </div>
    ...
</div>

Edith sagt: danke threadi, das "position: relative;" fehlte, auch wenn es leider nicht die Lösung des Problems war

 

[threadi]

In #mainLeft fehlt noch "position: relative;". Dadurch würde der absolut positionierte Bereich sich innerhalb des anderen ausrichten.

 

[ppluech]

Schon einmal vielen Dank für die Antwort. Ja, da hat sich der Fehlerteufel beim Erstellen des Threads eingeschlichen, in meinem Code ist das "position:relative" natürlich im übergeordneten Element enthalten. Prinzipiell funktioniert das "unten positionieren" ja auch, nur wenn der Inhalt zu lang geht werden keine Scrollbalken eingeblendet.

 

[Space Vampire]

So würde es gehen

<div style="width:400px; height:400px; overflow:auto;">
   <p style="width:400px; height:400px; display:table-cell; vertical-align:bottom;">
      Text
   </p>
</div>

P ist nach unten ausgerichtet und erweitert sich bei overflow
DIV scrollt dann bei bedarf