sticky bottom

Diskutiere sticky bottom im CSS Forum im Bereich Programmierung; 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...
Neues Thema erstellen Antworten
  • sticky bottom Beitrag #1
mhomz
mhomz
Member
Beiträge
8
Punkte Reaktionen
0
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 "position:fixed;" 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 "position:sticky; bottom:10px;" genügt offenbar nicht. Was mache ich falsch?

HTML: 
    <div id='div_inhalt' style='display:flex; flex-direction:column;'>
        <div id='div_oben' style='background-color:#f77; height:50px;'>
            oben
        </div><!--div_oben-->
        <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_linksoben-->
                <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_linksunten-->
            </div><!--div_links-->
        
            <div id='div_mittemitte' style='background-color:#59f; flex-grow:2; height:2500px;'>
                mitte mitte
            </div><!--div_mittemitte-->
            <div id='div_rechts' style='background-color:#ff7;'>
                rechts
            </div><!--div_rechts-->
        </div><!--div_mitte-->
        <div id='div_unten' style='background-color:#f7f; height:100px;'>
            unten
        </div><!--div_unten-->
    </div><!--div_inhalt-->
 
  • sticky bottom Beitrag #3
mhomz
mhomz
Member
Beiträge
8
Punkte Reaktionen
0
Ja, danke für den Link. Genauso soll es sein. Allerdings ist es gar nicht mal so einfach, sticky-top und sticky-bottom in ein DIV zu bekommen. Ich muss noch ein wenig rumdoktorn, aber die Reihenfolge, in der die verschiedenen DIVs sein müssen, ist mir jetzt klar.
 
  • sticky bottom Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Das Problem ist, dass das sticky auf das Elternelement wirkt, das gescrollt wird. In deinem Fall ist das das #div_linksunten und das wird nicht gescrollt. Von daher wundert es mich eher, dass es mit dem "sticky top" funktioniert. Es gibt da irgend welche Regeln, wann es über mehrere Stufen funktioniert und wann nicht aber ich habe sie nicht mehr im Kopf. Glaube, es hing irgend wie auch mit absoluter und relativer Positionierung zusammen. Werde bei Gelegenheit mal nachforschen.
 
  • sticky bottom Beitrag #5
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Inzwischen verstehe ich das Ganze wesentlich besser. Die sticky-Elemente verschieben sich nur innerhalb des Elterncontainers, nicht über dessen Grenzen hinaus. Und deshalb funktioniert es bei deinem Code mit dem "sticky top" weil sich der Elterncontainer nach unten ausdehnt und dort Platz ist.
Drehe ich das Ganze um, so dass der Elterncontainer unten liegt und sich nach oben ausdehnt, so ist auch das Verhalten der sticky-Elemente umgekehrt: Jetzt funktioniert der "sticky top" nicht, weil er sofort am Rand des Containers anstößt und der "sticky bottom" kann nach oben wandern weil dort Platz ist.
Code: 
<!DOCTYPE html>

<html>

<head>
</head>


<body>
    <div id='div_inhalt' style='display:flex; flex-direction:column;'>
        <div id='div_oben' style='background-color:#f77; height:50px;'>
            oben
        </div>
        <!--div_oben-->
        <div id='div_mitte' style='border:red 2px dashed; display:flex;'>
            <div id='div_links' style='display:flex; flex-direction:column; justify-content:flex-end;'>
                <!-- <div id='div_linksoben' style='background-color:#7f7; height:300px;'>
                    links oben
                </div> -->
                <!--div_linksoben-->
                <div id='div_linksmitte' style='background-color:#7b7; flex:1;
                display:flex; flex-direction:column; justify-content:flex-end;'>
                    links mitte
                    <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_linksmitte-->
                <div id="div_linksunten" style="height: 900px;"></div>
                <!--div_linksunten-->
            </div>
            <!--div_links-->

            <div id='div_mittemitte' style='background-color:#59f; flex-grow:2; height:2500px;'>
                mitte mitte
            </div>
            <!--div_mittemitte-->
            <div id='div_rechts' style='background-color:#ff7;'>
                rechts
            </div>
            <!--div_rechts-->
        </div>
        <!--div_mitte-->
        <div id='div_unten' style='background-color:#f7f; height:100px;'>
            unten
        </div>
        <!--div_unten-->
    </div>
    <!--div_inhalt-->
</body>

</html>
 
Zuletzt bearbeitet:
  • sticky bottom Beitrag #6
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
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>

<head>
</head>


<body>
    <div id='div_inhalt' style='display:flex; flex-direction:column;'>
        <div id='div_oben' style='background-color:#f77; height:50px;'>
            oben
        </div>
        <!--div_oben-->
        <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_linksoben' style='background-color:#7f7; height:300px;'>
                    links oben
                </div> -->
                <!--div_linksoben-->
                <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_linksmitte-->
                <!-- <div id="div_linksunten" style="height: 900px;"></div> -->
                <!--div_linksunten-->
            </div>
            <!--div_links-->

            <div id='div_mittemitte' style='background-color:#59f; flex-grow:2; height:2500px;'>
                mitte mitte
            </div>
            <!--div_mittemitte-->
            <div id='div_rechts' style='background-color:#ff7;'>
                rechts
            </div>
            <!--div_rechts-->
        </div>
        <!--div_mitte-->
        <div id='div_unten' style='background-color:#f7f; height:100px;'>
            unten
        </div>
        <!--div_unten-->
    </div>
    <!--div_inhalt-->
</body>

</html>
 
  • sticky bottom Beitrag #7
mhomz
mhomz
Member
Beiträge
8
Punkte Reaktionen
0
Ei wunderbar, danke für die Hilfestellung und die Bleistifte (Beispiele) :)
Jetzt habe ich es so, wie ich es mir vorstelle:

HTML: 
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    
        <div id='ganz_oben' style='background-color:#77f; height:50px;'>
            ganz oben
        </div><!--div_ganz_unten-->
        
        <div id'mitte' style='display:flex'>
        
            <div id='links' style='background:#ccc; display:flex; flex-direction:column; justify-content:space-between;'>
                <div style='background:#9f9; height:500px;'>
                    links oben (Menue)
                </div>
                <div style='background:red; position:sticky; top:10px;'>
                    sticky top
                </div>
                <div style='background:#ffc; min-height:400px; flex-grow:2;'>
                    dazwischen
                </div>
                <div style='background:red; position:sticky; bottom:10px;'>
                    sticky bottom
                </div>
            </div><!--div_links-->
            
            <div id='inhalt' style='background:#ffc; flex-grow:2; height:2000px;'>
                Inhalt
            </div><!--div_inhalt-->
        
        </div><!--div_mitte-->
        
        <div id='ganz_unten' style='background-color:#f7f; height:50px;'>
            ganz unten
        </div><!--div_ganz_unten-->   
    
    </body>
</html>
 
  • sticky bottom Beitrag #8
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Freut mich, dass es funktioniert. Ich habe auch profitiert, weil ich jetzt diese ganzen Probleme mit sticky-Positionierung besser verstehe.
 
Zuletzt bearbeitet:
Thema:

sticky bottom

Oben Unten