CSS Drücken Sie Div zum Ende der Seite
Bitte schauen Sie sich diesen Link an, ich möchte das Gegenteil: Wenn der Inhalt zu den Bildlaufleisten überläuft, möchte ich, dass meine Fußzeile immer ganz unten auf der Seite angezeigt wird, wie z. B. Stapelüberlauf.
Ich habe ein div mit id="footer"
und diesem CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
Alles, was es tut, ist, zum unteren Rand des Ansichtsfensters zu gehen und dort zu bleiben, selbst wenn Sie nach unten scrollen, sodass es nicht mehr unten ist.
Bild:
Es tut mir leid, wenn es nicht geklärt ist. Ich möchte nicht, dass es behoben wird, nur damit es am Ende des gesamten Inhalts steht.
css
positioning
css-position
footer
H Bellamy
quelle
quelle
position:fixed
, obwohl das nicht gerade der beste Weg ist, es zu tunAntworten:
Genau dafür
position: fixed
wurde konzipiert:Hier ist die Geige: http://jsfiddle.net/uw8f9/
quelle
fixed
Fußzeile gescrollt, wenn genügend Inhalt vorhanden ist. Das ist gut genug für mich. Natürlich kann ich sehen, wie sehr große Fußzeilen wie das, was sie im Stackoverflow haben, mit demfixed
Ansatz nicht gut funktionieren würden , aber für eine einfache einzeilige Fußzeile funktioniert dieser Ansatz meiner Meinung nach gut.Leider können Sie dies nicht tun, ohne ein wenig zusätzlichen HTML-Code hinzuzufügen und ein Stück CSS von einem anderen abhängig zu machen.
HTML
Zuerst müssen Sie Ihre wickeln
header
,footer
und#body
in ein#holder
div:CSS
Stellen Sie dann
height: 100%
aufhtml
undbody
(tatsächlicher Körper, nicht Ihr#body
Div) ein, um sicherzustellen, dass Sie die Mindesthöhe als Prozentsatz für untergeordnete Elemente festlegen können.Stellen Sie nun
min-height: 100%
das#holder
Div so ein, dass es den Inhalt des Bildschirms ausfüllt, undposition: absolute
setzen Sie die Fußzeile am unteren Rand des#holder
Div.Leider müssen Sie sich
padding-bottom
an das#body
div wenden , das die gleiche Höhe wie das hat,footer
um sicherzustellen, dass dasfooter
nicht über einem Inhalt steht:Arbeitsbeispiel, kurzer Text : http://jsfiddle.net/ELUGc/
Arbeitsbeispiel, langer Körper: http://jsfiddle.net/ELUGc/1/
quelle
width
oder beide angebenleft
undright
dann die Werte auf gesetzt werden, wirdauto
das Element entsprechend seinem Inhalt umbrochen. Das Festlegen vonwidth: 100%
oderleft: 0
undright:0
stellt sicher, dass das absolut positionierte Element die gesamte Breite des Containerelements einnimmtheight=100%
auf alle Ihre Elemente enthält, einschließlich der<form>
Elemente.Ich habe gerade für eine andere Lösung gearbeitet, da das obige Beispiel einen Fehler (irgendwo Fehler) für mich hat. Abweichung von der ausgewählten Antwort.
für HTML-Layout
Auf diese Weise wird der alte Browser nicht unterstützt, es ist jedoch akzeptabel, dass der alte Browser 30 Pixel nach unten scrollt, um die Fußzeile anzuzeigen
quelle
Mir ist klar, dass es heißt, dies nicht zu verwenden, um auf andere Antworten zu antworten, aber leider habe ich nicht genug Mitarbeiter, um der entsprechenden Antwort (!) Einen Kommentar hinzuzufügen, aber ...
Wenn Sie in asp.net Probleme mit der Antwort von "Mein Kopf tut weh" haben, müssen Sie dem generierten FORM-Haupttag "height: 100%" sowie HTML- und BODY-Tags hinzufügen, damit dies funktioniert.
quelle
Du hast deine nicht geschlossen; Nach Position: absolut. Andernfalls hätte Ihr obiger Code perfekt funktioniert!
quelle
Ich würde kommentieren, wenn ich könnte, aber ich habe noch keine Berechtigungen, daher werde ich einen Hinweis als Antwort für unerwartetes Verhalten auf einigen Android-Geräten veröffentlichen:
Position: Behoben funktioniert nur in Android 2.1 bis 2.3 mit dem folgenden Meta-Tag:
Siehe http://caniuse.com/#search=position
quelle
Dies ist eine intuitive Lösung mit dem Befehl Ansichtsfenster, mit dem nur die Mindesthöhe auf die Höhe des Ansichtsfensters abzüglich der Fußzeilenhöhe festgelegt wird.
quelle
Ich habe ein ähnliches Problem gelöst, indem ich meinen gesamten Hauptinhalt in ein zusätzliches div-Tag (id = "äußere") eingefügt habe. Ich habe dann das div-Tag mit id = "footer" außerhalb dieses letzten "äußeren" div-Tags verschoben. Ich habe CSS verwendet, um die Höhe von "Outer" und die Breite und Höhe von "Footer" anzugeben. Ich habe auch CSS verwendet, um den Rand links und rechts von "Fußzeile" als automatisch anzugeben. Das Ergebnis ist, dass die Fußzeile fest am unteren Rand meiner Seite sitzt und auch mit der Seite scrollt (obwohl sie immer noch innerhalb des "äußeren" Bereichs erscheint, aber glücklicherweise außerhalb des Hauptbereichs "Inhalt", was seltsam erscheint, aber es ist wo ich es will).
quelle
Ich möchte nur hinzufügen - die meisten anderen Antworten haben für mich gut funktioniert. Es hat jedoch lange gedauert, bis sie funktionierten!
Dies liegt daran, dass beim Einstellen
height: 100%
nur die Größe des übergeordneten Divs erfasst wird!Also, wenn Ihr gesamtes HTML (innerhalb des Körpers) wie folgt aussieht:
Dann ist folgendes in Ordnung:
... da "Inhaber" seine Höhe direkt vom "Körper" aufnimmt.
Ein großes Lob an meinen Kopf tut weh, dessen Antwort die war, die ich zur Arbeit gebracht habe!
Jedoch. Wenn Ihr HTML-Code stärker verschachtelt ist (weil es nur ein Element der gesamten Seite ist oder sich in einer bestimmten Spalte befindet usw.), müssen Sie sicherstellen, dass jedes enthaltende Element auch
height: 100%
für div festgelegt wurde. Andernfalls gehen die Angaben zur Höhe zwischen "Körper" und "Halter" verloren.Zum Beispiel das Folgende, wo ich jedem Div die Klasse "volle Höhe" hinzugefügt habe, um sicherzustellen, dass die Höhe bis zu unseren Kopf- / Körper- / Fußzeilenelementen reicht:
Und denken Sie daran, die Höhe für die Klasse mit voller Höhe im CSS festzulegen:
Das hat meine Probleme behoben!
quelle
Wenn Sie eine Fußzeile mit fester Höhe haben (zum Beispiel 712px), können Sie dies mit js wie folgt tun:
quelle
quelle
Verwenden Sie die Bootstrap-Klasse mit festem Boden
quelle