Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 12484, member: 3917"]
Lasse ich die Container "links oben" und "links unten" weg und schaffe statt dessen Platz innerhalb des Containers "links mitte", indem ich dort oben und unten Text einfüge, funktioniert es für beide sticky-Elemente:
[CODE]<!DOCTYPE html>

<html>

<body>
    <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:center;'>
                
                
                <div id='div_linksmitte' style='background-color:#7b7; flex:1;
                display:flex; flex-direction:column; justify-content:flex-end;'>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore ... hier ganz viel Text
                    <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>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore ... hier ganz viel Text
                </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>
    
</body>

</html>[/CODE]
[/QUOTE]

Authentifizierung