it-swarm.com.de

Sorgt dafür, dass div die ganze Zeit am Ende des Seiteninhalts bleibt, auch wenn Bildlaufleisten vorhanden sind

CSS Push Div zum Ende der Seite

Bitte sehen Sie sich diesen Link an, ich möchte das Gegenteil: Wenn der Inhalt über die Bildlaufleisten hinausläuft, möchte ich, dass sich meine Fußzeile immer am vollständigen unteren Rand des Fensters befindet Seite, wie Stapelüberlauf.

Ich habe ein Div mit id="footer" und diesem CSS:

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

Es wird jedoch nur bis zum unteren Rand des Ansichtsfensters verschoben und bleibt dort, auch wenn Sie nach unten scrollen, sodass es nicht mehr am unteren Rand ist.

Bild: Examlple

Es tut mir leid, wenn dies nicht geklärt ist. Ich möchte nicht, dass es behoben wird, nur damit es am Ende des gesamten Inhalts angezeigt wird.

236
H Bellamy

Genau dafür wurde position: fixed entwickelt:

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

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

500
Joseph Silber

Leider können Sie dies nicht tun, ohne ein wenig zusätzlichen HTML-Code hinzuzufügen und ein CSS-Element von einem anderen abhängig zu machen.

HTML

Zuerst müssen Sie Ihre header, footer und #body in einen #holder div einwickeln:

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

CSS

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

Stellen Sie nun min-height: 100% auf #holder div ein, sodass der Inhalt des Bildschirms ausgefüllt wird, und verwenden Sie position: absolute, um die Fußzeile am unteren Rand des #holder div anzuordnen.

Leider müssen Sie padding-bottom auf den #body Div anwenden, der dieselbe Höhe wie der footer hat, um sicherzustellen, dass der footer nicht über irgendeinem Inhalt liegt:

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 Körper: http://jsfiddle.net/ELUGc/

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

178
My Head Hurts

Habe gerade für eine andere Lösung gearbeitet wie oben beispiels wanze (irgendwo fehler) für mich. Abweichung von der gewä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

12
Anonymous

Mir ist klar, dass es heißt, dies nicht für "Antworten auf andere Antworten" zu verwenden, aber ich habe leider nicht genug Repräsentanten, um einen Kommentar zu der entsprechenden Antwort (!) Hinzuzufügen, aber ...

Wenn Sie in asp.net Probleme mit der Antwort von "My Head Hurts" haben, müssen Sie dem generierten FORM-Tag sowie den HTML- und BODY-Tags "height: 100%" hinzufügen, damit dies funktioniert.

5
Ian

Sie haben Ihr nicht geschlossen; Nachstellung: absolut. Andernfalls hätte Ihr oben genannter Code perfekt funktioniert!

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

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

Position: Behoben funktioniert nur in Android 2.1 bis 2.3 unter Verwendung des folgenden Metatags:

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

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

3
Tarciso Junior

Dies ist eine intuitive Lösung, die den Befehl viewport verwendet, mit dem die minimale Höhe auf die Ansichtsfensterhöhe 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%;
}
2
Obromios

Ich habe ein ähnliches Problem behoben, indem ich meinen gesamten Hauptinhalt in ein zusätzliches div-Tag (id = "outer") gestellt 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 linken und rechten Rand von "footer" als auto festzulegen. Das Ergebnis ist, dass die Fußzeile fest am Ende meiner Seite sitzt und auch mit der Seite scrollt (obwohl sie immer noch in der "äußeren" Abteilung erscheint, aber glücklich außerhalb der Hauptabteilung "Inhalt", was seltsam erscheint, aber es ist wo ich es will).

1
David B

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";
}
1
George Carlin

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 die Einstellung von height: 100% nur die Höhe des übergeordneten Div erfasst!

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 wird das folgende in Ordnung sein:

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; 
}

... als "Inhaber" wird seine Höhe direkt von "Körper" abholen.

Ein dickes Lob an meinen Kopf tut weh, dessen Antwort ich am Ende zur Arbeit gebracht habe!

Allerdings. Wenn Ihr HTML-Code mehr verschachtelt ist (weil es nur ein Element der gesamten Seite ist oder in einer bestimmten Spalte usw.), müssen Sie sicherstellen, dass Jedes enthaltende Element hat auch height: 100% auf dem div gesetzt. Andernfalls gehen die Höhenangaben zwischen "Körper" und "Halter" verloren.

Z.B. Im Folgenden habe ich jedem Div die Klasse "full height" hinzugefügt, um sicherzustellen, dass die Höhe bis zu unseren Kopf-, Körper- und 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 in der CSS festzulegen:

#full-height{
    height: 100%;
}

Das hat meine Probleme behoben!

1
Tim L