Bootstrap-4 - Sticky footer - Dynamische Fußzeile Höhe
Ich einen sticky footer auf meinen Seiten , aber ich don ' T haben eine bestimmte Höhe eingestellt für meine Fußzeile . Auf kleineren Bildschirmen - die Zeilen, ändern der Größe und Fußzeile wird länger .
Daher die Standard-sticky footer-Beispiel auf getbootstrap nicht funktionieren, da es erfordert eine Feste Fußzeile Höhe.
Irgendeine Möglichkeit dies umzusetzen ?
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
- Mögliche Duplikate von Wie man eine Flüssigkeit sticky footer
InformationsquelleAutor Sam.tuver | 2017-08-28
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nun, dass die Bootstrap-4 ist flexbox, einen sticky footer gemacht werden kann...
Demo: Bootstrap 4 Sticky Footer (4.0.0)
Hinweis: Die
flex-fill
utility-Klasse wird in der nächsten Bootstrap 4.1 release. So nach und nach, dass release die extra CSS-Datei für den flex-fill wird nicht mehr benötigt.Eine sehr einfache Möglichkeit ist die Verwendung einer Navigationsleiste als Fußzeile. Es kommt mit einem festen unteren Klasse, die ist wirklich praktisch. Ändern Sie Ihren Abstand sehen Sie die Dokumentation hier... https://getbootstrap.com/docs/4.2/utilities/spacing/
Verwenden
min-height
statt Höhe zu machen variabler Höhe.https://codepen.io/hunzaboy/pen/prxgRb
Auch auf kleineren Bildschirmen entfernen Sie einfach die absolute position und stellen Sie ein statisches.
Dieses Skript dynamisch hinzufügen
fixed-bottom
Klasse Seite, wenn die Höhe weniger als viewport-Höhe:Stil für das verhindern von überschneidungen mit modals, Feste Seitenleisten usw...