HTML/CSS Footer klebt nicht auf dem Boden bewegt auf dem Bildschirm Größe ändern

Ich habe den folgenden Versuch, einen einfachen Sticky Footer zu versuchen.HTML/CSS Footer klebt nicht auf dem Boden bewegt auf dem Bildschirm Größe ändern

Mein Problem ist die Fußzeile ist nicht zu Boden, ich vermute, es könnte ein CSS-Problem sein.

Würde es sehr schätzen, wenn jemand den folgenden Code einen Scan geben und einige Ratschläge geben kann.

#footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: red; 
    position: absolute; 
    bottom: 0; 
} 
    <footer class="footer" id="footer"> 
    <div class="footLeft" style="width:75%; float:left;"> 
    </div> 
    <div class="footerRight" style="width:25%; float:right; padding:25px;"> 
     <button class="btn btn-danger" style="font-size:20px;">Sign Up</button> 
    </div> 
    </footer>

Das Problem Im mit/Output

Quelle

2017-02-25 Timothy Coetzee

Sie Position relativ zum Körper-Tag gegeben haben. Es wird großartig sein, wenn Sie eine Demo-URL teilen können, damit wir sie betrachten können. Deine Fußzeileneigenschaften sind in Ordnung. Ich denke, das Problem muss mit dem relativen Container sein –

Wie Sie sehen können, ist die Position Eigenschaft auf 'position: absolute' gesetzt es gibt keinen zusätzlichen Wrapper über die Fußzeile –

@TimothyCoetzee Wie sieht Ihr' body' CSS aus? Haben Sie versucht, 'body {min-height: 100vh;}' hinzuzufügen, vorausgesetzt, dass der Körper immer mindestens die Höhe des Viewports haben soll? –

die folgenden Regeln Körper hinzufügen

body { 
    min-height:100%;/*or 100vh */ 
    position:relative; 
}

Erläuterung:

Die min-height-Eigenschaft stellt sicher, dass der Körper mindestens 100% der Ansichtsfensterhöhe einnimmt. Auf diese Weise bleibt Ihre Fußzeile auch bei weniger Inhalt immer unten am Ansichtsfenster.

Position: relative Regel wird so eingestellt, dass die Fußzeile absolute relativ zum Körper positioniert ist und keine anderen Wrapper

Quelle

2017-02-25 05:33:08

hinzufügen Kiran Dash, die funktionierte! Würde es Ihnen etwas ausmachen, eine Erklärung zu geben, warum ich die min-height Eigenschaft auf Körper einstellen musste? –

sicher. Ich werde die Antwort erklären und aktualisieren. Froh, dass es geholfen –

Ich habe die Antwort aktualisiert. Hoffnung, die geholfen hat. Wenn es dein Problem löst. Bitte überprüfen Sie es als die richtige Antwort. Ich wünsche ihnen einen wunderbaren Tag –

Sie können nur diese nativen Klasse verwenden sticky Footer in bootstrap--

<div class="footer navbar-fixed-bottom">

Quelle

2017-02-25 05:34:06 neophyte

zu erreichen Eine andere Möglichkeit ist die Verwendung position:fixed, ohne den Körper css zu beeinflussen. In diesem Fall würde der Fuß immer am unteren Rand der Seite Ereignis, wenn eine Scrollbar

Beispiel

#footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: red; 
    position: fixed; 
    bottom: 0; 
}

vorhanden ist Siehe fiddle

Quelle

2017-02-25 05:41:10 Massimo

HTML/CSS Footer klebt nicht auf dem Boden bewegt auf dem Bildschirm Größe ändern

Antwort

Verwandte Themen