Lassen Sie div die ganze Zeit am Ende des Seiteninhalts bleiben, auch wenn Bildlaufleisten vorhanden sind

261

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: Beispiel

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.

— H Bellamy
quelle

1

versuchen Sie position:fixed, obwohl das nicht gerade der beste Weg ist, es zu tun

— redDevil

Versuchen Sie die Position: relativ zum Körper.

1

du hast deine nicht geschlossen; Nach Position: absolut. sonst hätte es perfekt geklappt!

— AlexHighHigh

545

Genau dafür position: fixedwurde konzipiert:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Hier ist die Geige: http://jsfiddle.net/uw8f9/

— Joseph Silber
quelle

65

Diese Lösung ist in 90% der Fälle nicht gut. Wenn Sie die Größe Ihres Fensters ändern, überlagert Ihre Fußzeile andere Inhalte und stoppt nicht direkt am Ende Ihres Inhalts

— vsync

10

@aroth das liegt daran, dass es sich um zwei völlig unterschiedliche Lösungen handelt. Diese Lösung hält die Fußzeile immer am unteren Rand des visuellen Bereichs des Bildschirms. Bei der alternativen Lösung bleibt die Fußzeile entweder am unteren Bildschirmrand oder am unteren Rand der Seite, je nachdem, welche größer ist - was der Fragesteller angefordert hat.

— Mein Kopf tut weh

6

@ MyHeadHurts - Du hast absolut Recht. Nachdem ich geantwortet hatte, wurde mir klar, dass dies nicht das war, was das OP wollte, aber ich ließ es hier für Leute, die nach einer einfachen festen Fußzeile suchten. Aus den Kommentaren (und Abstimmungen) geht hervor, dass viele Menschen mit dieser elementaren CSS-Funktion zu kämpfen haben.

— Joseph Silber

1

@MyHeadHurts - Fair genug, obwohl für mein Geld beide im Grunde immer noch gleich sind. Der Inhalt wird unter der fixedFuß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 dem fixedAnsatz nicht gut funktionieren würden , aber für eine einfache einzeilige Fußzeile funktioniert dieser Ansatz meiner Meinung nach gut.

— aroth

@aroth Ich stimme zu, dies ist eine gute Lösung und alles hängt davon ab, was Sie wollen. Ich habe nur darauf hingewiesen, warum eine Lösung komplizierter ist als die andere -> sie machen nicht dasselbe.

— Mein Kopf tut weh

187

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, footerund #bodyin ein #holderdiv:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Stellen Sie dann height: 100%auf htmlund body(tatsächlicher Körper, nicht Ihr #bodyDiv) ein, um sicherzustellen, dass Sie die Mindesthöhe als Prozentsatz für untergeordnete Elemente festlegen können.

Stellen Sie nun min-height: 100%das #holderDiv so ein, dass es den Inhalt des Bildschirms ausfüllt, und position: absolutesetzen Sie die Fußzeile am unteren Rand des #holderDiv.

Leider müssen Sie sich padding-bottoman das #bodydiv wenden , das die gleiche Höhe wie das hat, footerum sicherzustellen, dass das footernicht über einem Inhalt steht:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

Arbeitsbeispiel, kurzer Text : http://jsfiddle.net/ELUGc/

Arbeitsbeispiel, langer Körper: http://jsfiddle.net/ELUGc/1/

— Mein Kopf tut weh
quelle

Ich kann nicht verstehen, warum Breite: 100%; ist erforderlich

— Somnath Kharat

4

@sTACKoVERFLOW - Wenn Sie kein width oder beide angeben leftund rightdann die Werte auf gesetzt werden, wird autodas Element entsprechend seinem Inhalt umbrochen. Das Festlegen von width: 100% oder left: 0 und right:0stellt sicher, dass das absolut positionierte Element die gesamte Breite des Containerelements einnimmt

— Mein Kopf tut weh

Ich habe nach einem ähnlichen Verhalten gesucht, aber in meinem Fall wird der #body div schwebend angezeigt, indem ich "float: left" sage. Das Beispiel für einen kurzen Körper funktioniert, das Beispiel für einen langen Körper jedoch nicht. Irgendwelche Vorschläge, wie ich das gewünschte Verhalten mit float auf dem #body div erreichen kann.

— Jatin

@ Ian sagte in einer Antwort, weil er nicht genug Repräsentanten hatte, um zu kommentieren: Wenn Sie Probleme in asp.net mit der Antwort von 'My Head Hurts' haben, müssen Sie 'height: 100%' zum Haupt hinzufügen generiert FORM-Tag sowie HTML- und BODY-Tags, damit dies funktioniert.

— msouth

Wenn Sie versuchen , diese eher in einem div zur Arbeit zu kommen als in den ganzen Körper, stellen Sie sicher , dass Sie angeben , height=100%auf alle Ihre Elemente enthält, einschließlich der <form>Elemente.

— Ben Caine

13

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.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

für HTML-Layout

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

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

Plunker

— Anonym
quelle

5

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.

— Ian
quelle

4

Du hast deine nicht geschlossen; Nach Position: absolut. Andernfalls hätte Ihr obiger Code perfekt funktioniert!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

— AlexHighHigh
quelle

3

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:

<meta name="viewport" content="width=device-width, user-scalable=no">.

Siehe http://caniuse.com/#search=position

— Tarciso Junior
quelle

2

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.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

— Obromios
quelle

1

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).

— David B.
quelle

1

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:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Dann ist folgendes in Ordnung:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

... 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:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

Und denken Sie daran, die Höhe für die Klasse mit voller Höhe im CSS festzulegen:

#full-height{
    height: 100%;
}

Das hat meine Probleme behoben!

— Tim L.
quelle

0

Wenn Sie eine Fußzeile mit fester Höhe haben (zum Beispiel 712px), können Sie dies mit js wie folgt tun:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

— George Carlin
quelle

0

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

— Praveen Kundu
quelle

Bitte beschreiben Sie in Ihrer Antwort, was das Problem war und wie dieses Snippet es lösen wird, um anderen zu helfen, diese Antwort zu verstehen

— FZs

-2

Verwenden Sie die Bootstrap-Klasse mit festem Boden

<div id="footer" class="fixed-bottom w-100">

— Gowtham Sooryaraj
quelle

Es gibt keinen Hinweis darauf, dass OP Bootstrap verwendet.

— TylerH