Auf Thema antworten

Beitrag

[QUOTE="mhomz, post: 12479, member: 4228"]
Moin,
Ich habe schon den Beitrag "sticky vom bottom aus" gelesen, aber das ist nicht das, was ich vorhabe.
Ich möchte, dass ein DIV immer am unteren Rand klebt, bis der untere Teil der Seite kommt. Dann soll das sticky-bottom-DIV am unteren Rand seines Parent-DIV stehen bleiben. Daher ist "[COLOR=rgb(209, 72, 65)]position:fixed;[/COLOR]" keine Lösung für mich.

Ich schicke mein Gerüst hier mit. Wegen der besseren Übersicht habe ich das CSS in style-Attribute gepackt. Sonst binde ich es über Klassen ein.

Mein Problem: Das sticky-bottom-DIV wird ganz normal positioniert. Einfach nur "[COLOR=rgb(209, 72, 65)]position:sticky; bottom:10px;[/COLOR]" genügt offenbar nicht. Was mache ich falsch?

[CODE=html]
    <div id='div_inhalt' style='display:flex; flex-direction:column;'>
        <div id='div_oben' style='background-color:#f77; height:50px;'>
            oben
        </div>
        <div id='div_mitte' style='border:red 2px dashed; display:flex;'>
            <div id='div_links' style='display:flex; flex-direction:column; justify-content:space-between;'>
                <div id='div_linksoben' style='background-color:#7f7; height:300px;'>
                    links oben
                </div>
                <div id='div_linksunten' style='background-color:#7b7; flex-grow:2;'>
                    links unten
                   <div style='border:1px solid red; position:sticky; top:10px;'>
                       sticky top
                   </div>
                   <div style='border:1px dashed red; position:sticky; bottom:10px;'>
                       sticky bottom
                   </div>
                </div>
            </div>
        
            <div id='div_mittemitte' style='background-color:#59f; flex-grow:2; height:2500px;'>
                mitte mitte
            </div>
            <div id='div_rechts' style='background-color:#ff7;'>
                rechts
            </div>
        </div>
        <div id='div_unten' style='background-color:#f7f; height:100px;'>
            unten
        </div>
    </div>
[/CODE]
[/QUOTE]

Authentifizierung