DIV mit variabler Höhe an unterkante eines anderen DIV ausrichten

george_w_bush

Grünschnabel
Hallöchen =)

Ich habe in kleines Problem dessen Herr ich nicht werde.

Und zwar habe ich eine Menüleiste unten Positioniert. Bei Mouseover öffnet sich ein Untermenü nach oben. Bisher hat dieses immer eine Fixe höhe bekommen und ich habe es Manuell neu Positioniert. Ich möchte es aber so lösen, das egal wie hoch es ist, es immer mit der Unterkante bündig am Menü anliegt und nach oben wächst.

Ich hoffe ihr könnt mir helfen.

Das ganze ist zu sehen unter http://www.joern-caspari.de/ unter dem Menüpunkt "Media"
 
Vom Grundsatz her müsste das CSS für das Untermenü so lauten:
CSS:
position:absolute;
bottom:0; /* oder ein alternativer Wert statt "0" */

Zur Verdeutlichung siehe z.B. http://www.cssplay.co.uk/menus/upmenu.html - darin gilt für die erste Untermenüebene bottom:26px.

Beachte hier bitte auch die HTML-Struktur des Menüs, das in der CSS-Praxis als Aufklappmenü jeglichen Typs bzw. jeglicher Ausrichtung, innerhalb eines <ul>-Listenelements ausgezeichnet wird, dessen <li>-Elemente die Menüpunkte repräsentieren, und weitere in ihnen nachfolgende <ul>-Elemente die Untermenüebenen bilden.

Beispiel:
HTML:
<ul>
    <li>
        <a>item 1</a>
    </li>
    <li>
        <a>item 2</a>
        <ul> 
            <li>
                <a>item 2.1</a>
            </li> 
            <li>
                <a>item 2.2</a>
                <ul>
                    <li>
                        <a>item 2.2.1</a>
                    </li>
                    <li>
                        <a>item 2.2.2</a>
                    </li>
                </ul>
            </li>
        </ul> 
    </li>
</ul>
 
Zuletzt bearbeitet:
Mein Problem passt zur gleichen Überschrift, ist aber etwas anderer Natur. Und zwar habe ich zwei DIVs - nennen wir sie hier #content und #footer. Die Höhe beider DIVs ist variabel, hängt also vom Inhalt ab. #footer soll aber am unteren Ende des Browsers angezeigt werden und eine Mindesthöhe von 150px haben. #footer habe ich also "absolute" positioniert und mit "bottom:0; min-height:150px;" ausgerichtet.

Wenn #content zu groß wird, soll #footer nach unten "gedrückt" werden, sodass scrollen notwendig wird, um #footer zu sehen. Leider überlappt aber #content #footer :(

Mein Problem wäre ja mit "margin-bottom:150px;" auf #content behoben, wenn #footer IMMER 150px groß wäre. So aber müsste das margin ja immer der Höhe von #footer entsprechen, die aber variabel ist. Wie kriege ich das denn (allein mit CSS) hin?

Danke im Voraus.

edit: Anders gesagt, habe ich zwei DIVs variabler Höhe, eins "wächst" von oben, eins von unten und wenn die Seite voll ist, soll gescrollt werden.
 
Zuletzt bearbeitet von einem Moderator:
Zurück