Sticky Footer auf einer Website mit 100% Höhe

Ich versuche, eine klebrige Fußzeile auf einer Seite mit 100% Höhe in jedem Tag zu bekommen. Mein Problem ist, dass, wenn der Inhalt größer als die Anzeige ist und ich nach unten scrolle, die Fußzeile nicht mehr am unteren Rand der Seite ist. Die Fußzeile bleibt an der Position wie folgt aus: Picture of the footer Sticky Footer auf einer Website mit 100% Höhe

Hier ist ein Beispiel ein: (das war der falsche Link ..) http://jsfiddle.net/qt3m1p4c/

<html style:"height: 100%"> 
    <body style:"height: 100%"> 
     A lot of Content 
    </body> 
    <footer style:"position: absolute; bottom: 0;"> 
     Sticky Footer 
    </footer> 
</html>

Hat jemand nicht, wie dies zu beheben, ohne das Entfernen Höhe Attribute?

Quelle

2017-06-04 Marco Göpfrich

Die Position: fixed für die Fußzeile. – Gerard

Sie benötigen Position zu setzen: in Ihre Fußzeile festgelegt, bedeutet dies, was auch immer auf Ihrer Seite geschieht, wird dieses Element in derselben Stelle stehen, here your code with changed position

.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background:#ccc; 
}

Quelle

2017-06-04 16:37:56

Aber jetzt ist die Fußzeile vor einigen der Text .. –

@ MarcoGöpfrich ja, um das zu lösen, geben Sie eine Höhe zu Ihrer Fußzeile, und fügen Sie Padding gleich diesem Wert zu Ihrem Wrapper :) –

die Fußzeile INSIDE den Inhalt Wrapper Setzen und die CSS ändern wie folgt:

.pageContentWrapper { 
    padding-bottom:100px; 
    min-height: 100%; 
    position: relative; 
    box-sizing: border-box; 
} 
.footer { 
    position: absolute; 
    [...] 
}

Hier ist eine Geige: (Edited, ich vergaß box-sizing: border-box; zunächst hinzugefügt werden): http://jsfiddle.net/uc6y5dhs/1/

Quelle

2017-06-04 16:41:57 Johannes

Sticky Footer auf einer Website mit 100% Höhe

Antwort

Verwandte Themen