Make div Stick unten auf der Seite

Also habe ich eine Kontaktseite, und ich möchte, dass die Fußzeile div auf den unteren Rand der Seite nicht direkt nach dem Kontakt-Formular kleben.Make div Stick unten auf der Seite

Aber wenn ich alles in einen Container div mit der Höhe setzen: 100%; und Fußzeile unten machen: 0; dann wird die Seite "zu lang" sein, müssen Sie blättern, etc ...

mein css so weit:

#footer{ 
    background-color:#fff; 
    font:bold 14px; 
    color:#1E88E5; 
    width:100%; 
    height:auto; 
    padding:1%; 
    border-top:1px solid #1E88E5; 

}

Footer ist nur eine normale volle Breite div mit etwas Text zentriert atm.

Quelle

2016-08-23 mheonyae

Möchten Sie die Fußzeile sichtbar sehen, ohne die Rolle zu benötigen? –

Mögliches Duplikat von: [Lassen Sie div am Ende des Seiteninhalts die ganze Zeit bleiben, auch wenn Bildlaufleisten vorhanden sind] (http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages- content-all-time-even-where-there-are-scroll) – AlexG

ich will nicht, dass es immer unten sichtbar ist, ... ich will, dass es am Ende der Seite bleibt, aber für den Fall, dass die Seite " länger "würden Sie nach unten scrollen und dann die Fußzeile sehen – mheonyae

Wenn Sie sticky Footer Sie es mit 2 Lösungen machen.

Lösung 1:

HTML:

<div class="wrap"> 
    Content 
</div> 
<div class="footer"> 
    Sticky Footer 
</div>

CSS:

body, html, .wrap{ 
    height:100%; 
} 

body > .wrap{ 
    height:auto; 
    min-height:100%; 
} 

.wrap:after { 
    content: ""; 
    display: block; 
    height: 100px; 
} 

.footer{ 
    background:#662e8c; 
    margin-top:-100px; 
    height:100px; 
    color:#fff; 
    position:relative; 
    line-height:180%; 
    padding:0 10px; 
}

Beispiel: https://jsfiddle.net/ta1amejn/

Lösung 2 (mit Tabelleneigenschaften):

HTML: Inhalt Footer

CSS:

body{ 
    display:table; 
    width: 100%; 
} 

html, body{ 
    height:100%; 
} 

.main{ 
    height:100%; 
    width:100%; 
    padding-bottom:20px; 
    background:#eee; 
    display:table-row; 
} 

.footer{ 
    /*height:30px;*/ 
    line-height:30px; 
    width:100%; 
    background:#00f0ad; 
    display:table-row; 
}

Beispiel: https://jsfiddle.net/zbtaoq1b/

Wenn Sie eine feste Fußzeile Verwendung dieser Lösung wollen:

.footer{ 
    position: fixed; 
    bottom: 0; 
}

Quelle

2016-08-23 10:59:41

Sie können sich wahrscheinlich position: fixed verwenden, um dies zu erreichen.

.footer { 
    position: fixed; 
    bottom: 0; 
}

Damit müssen Sie das unten auf der Seite kompensieren, so würde eine padding-bottom-.main empfiehlt das Hinzufügen, dass die Höhe der Fußzeile ist.

.main { 
    padding-bottom: 30px /*whatever the height of your footer is*/ 
}

Quelle

2016-08-23 11:01:36 Guy

Pritesh Gupta's solution funktioniert wirklich gut für mich:

Ich + kopieren Sie den Code in Fall Einfügen ihrer Website untergeht:

Hier ist der HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sticky Footer</title> 
    </head> 

    <body> 
    <main>stuff</main> 
    <footer>&copy; 2016</footer> 
    </body> 
</html>

Hier ist der CSS:

body { 
    margin: 0; 
} 

main { 
    min-height: calc(100vh - 4rem); 
} 

footer { 
    height: 4rem; 
}

Ich weiß nicht, ob es in alten Browsern funktioniert, aber ich mache mir darüber keine Sorgen.

Es hängt auch davon ab, dass Sie die Höhe Ihrer Fußzeile kennen, obwohl es wichtig ist, darauf hinzuweisen, dass Sie die Höhe nicht unbedingt wie im obigen Code manuell einstellen müssen, denn Sie können immer herausfinden, was es ist Wie viel vertikale Polsterung und Zeilenhöhe der Inhalt hat ...

Hoffe, dass dies hilft, verbrachte ich die meiste Zeit des Vormittags versuchen jeden einzelnen Sticky Footer Tutorial im Web vor Stolpern über diese Technik und während other Techniken funktionieren diese erfordert minimalen Aufwand.

Quelle

2016-08-26 09:45:18 stephenmurdoch

Sie können das leicht mit der display: flex tun. Sie interessieren sich nicht für Höhe body oder wrapper Tag.

Beispiel: Bitte ändern Sie die Höhe der main tag jeder beliebige Wert, wenn Sie wollen, footer immer klebrig nach unten (nicht position: fixed).

https://codepen.io/tronghiep92/pen/dzwRrO

HTML-Markup

<div id="wrapper"> 
    <header>my header</header> 
    <main>main content, please change height</main> 
    <footer> 
    my footer 
    </footer> 
</div>

CSS-Lösung

#wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

header { 
    height: 100px; 
    background: yellow; 
} 

footer { 
    height: 50px; 
    background: red; 
    margin-top: auto; /* this is the solution */ 
} 

main { 
    height: 100px 
}

Oder Sie können:

#wrapper { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 100vh; 
} 

header { 
    height: 100px; 
    background: yellow; 
} 

footer { 
    height: 50px; 
    background: red; 
} 

main { 
    flex: 1; 
    height: 100px; 
}

Quelle

2017-08-31 03:10:37 tronghiep92

Make div Stick unten auf der Seite

Antwort

Verwandte Themen