Footer am unteren Rand des Layouts
Ich habe ein flüssiges Layout, aber als Konsequenz, wenn es nicht genug Inhalt auf der Seite gibt, bewegt sich meine Fußzeile weiter wie in diesem Beispiel .
Eine beliebte Lösung, um die Fußzeile am unteren Rand der Seite zu behalten, ist position: fixed oder position: absolute . Wenn ich das tue, kann der Inhalt bei der Größenänderung mit der Fußzeile kollidieren (Sie können sehen, was ich meine < a href="http://jsfiddle.net/q6kLE/1/"> hier Versuchen Sie, die Größe des Fensters so zu ändern, dass sich der Text hinter der Fußzeile befindet.
Wie kann ich also unten eine Fußzeile bekommen, die sich aber mit dem Rest der Seite in einem flüssigen Layout bewegt?
Danke!
4 Antworten
Dafür gibt es einen CSS-Weg. Oder zumindest gibt es einen, der für alle Browser funktioniert, die ich unterstütze (zurück zu IE7).
Ich verwende den negativen Margin-Top-Trick, um die Fußzeile an den unteren Rand der Seite zu kleben. Dieses DIV ist um den gesamten Seiteninhalt statt nur um den Header gewickelt, was für die meisten Leute ausreicht. Nehmen wir an, dass DIV eine Klasse "Alles-aber-der-Fuß" hat. Ich zwinge dann die Seite, mindestens Fensterhöhe zu sein. Vollversion, die auf den meisten Browsern funktioniert:
%Vor%Beachten Sie, dass die in den Kommentaren aufgelistete JSFiddle-Methode überhaupt nicht auf IE funktioniert und das angegebene Problem (Fußzeile und Inhalt überlappend) nicht löst.
Ich denke nicht, dass es eine richtige Lösung gibt, die nur CSS verwendet, aber Sie können versuchen, Ihrem Hauptinhaltsbereich ein min-height zu geben. Stellen Sie es auf eine sichere Höhe ein und wenn der Inhalt mehr Platz benötigt, wird es entsprechend erweitert.
Versuchen Sie es und sehen Sie, ob Sie nach etwas ähnlichem suchen
Wenn der Inhaltsbereich kleiner als Ihr Ansichtsfenster ist, positioniert er die Fußzeile auf unten im Ansichtsfenster , und wenn er größer als das Ansichtsfenster ist, bleibt er nur bei Ende des Inhalts wie es soll. Dem resize-Ereignis wird ein Ereignis hinzugefügt, sodass es sich auch nach der Größenanpassung des Browsers entsprechend positioniert.
Dafür können Sie hierfür die sticky footer -Technik verwenden.
Überprüfen Sie dies: Ссылка
Ich könnte so etwas machen ... mit ein wenig jQuery.
%Vor%Beispiel: Ссылка
Tags und Links jquery css position footer fluid-layout