Bootstrap 4 Sticky Footer Nicht Kleben

Nicht wirklich sicher, warum der sticky footer funktioniert nicht in der Bootstrap-4. Ich habe eine TYPO3-website, die ich bin ein Anfänger bei.

Den sticky footer nicht kleben am unteren Rand der Seite.

Hier ist eine Kopie der Seite Quelle, wie es gerendert wurde.

Habe ich im Prinzip kopiert die html-Datei von Stiefelriemen docs-Ordner und dann modifiziert es und kopiert es in mein TYPO3 template.

Wenn ich füllen die Seite mit Inhalt, den footer klebt nicht - ich muss scrollen Sie nach unten, um es zu sehen.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">

<link rel="stylesheet" type="text/css"
	href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
	href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
	media="all">
<link rel="stylesheet" type="text/css"
	href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
	media="all">

<script
	src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
	type="text/javascript"></script>
<script
	src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
	type="text/javascript"></script>
<script
	src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
	type="text/javascript"></script>

</head>
<body>
	<div class="container">
		<div class="mt-1">
			<h1>Sticky footer</h1>
		</div>
		<p class="lead">Pin a fixed-height footer to the bottom of the
			viewport in desktop browsers with this custom HTML and CSS.</p>
		<p>
			Use <a href="../sticky-footer-navbar">the sticky footer with a
				fixed navbar</a> if need be, too.
		</p>
		<div class="row">
			<div class="col">1 of 3</div>
			<div class="col">1 of 3</div>
			<div class="col">1 of 3</div>
		</div>
	</div>

	<footer class="footer">
		<div class="container">
			<span class="text-muted">Place sticky footer content here.</span>
		</div>
	</footer>
</body>
</html>

Bitte überprüfen Sie Ihre CSS-Datei-Pfade...
Datei-Pfade richtig sind. Ich habe verifiziert, indem Sie " Quelle anzeigen -> dann klicken Sie auf jede, um zu sehen, ob es lädt den text, und Sie tun.
Wenn ich Kontrolle über Ihre zur Verfügung gestellten conde snippet, Keine Formatvorlagen angewendet, um den HTML-Inhalt.

InformationsquelleAutor Daryn | 2017-10-13

34

Verwaltet, um es herauszufinden. Vielleicht habe ich auch ein Missverständnis auf, was "Sticky" ist oder sowas, aber die Lösung war die Veränderung absolut -> Feste in der css-Datei.

z.B. aus:
```
.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;
}
```
zu:
```
.footer {
  position: fixed;
  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;
}
```
- Dies sollte die richtige Antwort!
- Ja funktioniert korrekt, wenn über das scrollen Inhalt in der Bootstrap-4.1.3
- Danke @Daryn intelligente Lösung!
- Das ist nicht einen sticky footer (fest nach unten, wenn der Inhalt weniger als eine Seite, die andere nach unten gedrückt Vergangenheit Inhalt, bis der Benutzer scrollt nach unten); dies ist ein fixed-bottom footer (bleibt immer sichtbar über die Inhalte, fixiert bis zum unteren Ende des browser beim scrollen)
InformationsquelleAutor Daryn

Beispiel in der Bootstrap-4 docs hat die folgenden CSS:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

Hast du wohl vergessen zu setzen html { position: relative; min-height: 100%; } - ich weiß, dass ich in der Regel vergessen, das Teil.

gespeichert meiner Zeit.....vielen Dank 🙂
Dies sollte die richtige Antwort, wie es Adressen die Bootstrap 4.0 von snafu nicht zu erwähnen, die html CSS Anforderungen.
Überprüfen Sie die Erklärung hier 🙂 freecodecamp.org/news/...

InformationsquelleAutor Benjineer

22

Update 2018 - Bootstrap-4.0.0

Nun, dass Bootstrap 4.0 ist flexbox, es ist einfacher zu bedienen flexbox für die sticky-footer.
```
<div class="d-flex flex-column sticky-footer-wrapper">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</div>

body, .sticky-footer-wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}
```
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.

Siehe auch: Bootstrap-4 - Sticky footer - Dynamische Fußzeile Höhe
- <wrapper>...</wrapper "> " ist kein gültiges html(5)
- Dies ist die einzig richtige sticky footer aus diesen Antworten (fest nach unten, wenn der Inhalt weniger als eine Seite, die andere nach unten gedrückt Vergangenheit Inhalt, bis der Benutzer scrollt nach unten); die anderen sind fest-Boden Fußzeilen (bleibt immer sichtbar über die Inhalte, fixiert bis zum unteren Ende des browser beim scrollen)
InformationsquelleAutor Zim
11

In der Bootstrap-4, mit den fixed-bottom Klasse zu halten Ihre Fußzeile. Keine benutzerdefinierten CSS benötigt:
```
<footer class="footer fixed-bottom">
    ...
</footer>
```
- das ist nicht gut, mit "fixed-bottom" in der Fußzeile für alle die anderen Elemente, wenn die Seite kurz genug...
- Dies funktionierte gut für mich. Um das Problem zu beheben, die von aufgeworfenen @GianlucaGhettini, habe ich nur noch einen hintergrund zu <footer> und padding-bottom zu <body> (selben, die Sie benötigen, um padding-top auf <body> bei der Verwendung einer fixierten navbar).
- Das ist nicht einen sticky footer (fest nach unten, wenn der Inhalt weniger als eine Seite, die andere nach unten gedrückt Vergangenheit Inhalt, bis der Benutzer scrollt nach unten); dies ist ein fixed-bottom footer (bleibt immer sichtbar über die Inhalte, fixiert bis zum unteren Ende des browser beim scrollen)
InformationsquelleAutor shacker
1
```
<html class="h-100">
.
.
</html>
```
Dieser sollte das problem lösen. Es ist ähnlich wie Benjineer ist Antwort ist aber bereit, bootstrap-Klasse.
Getestet mit Bootstrap 4.3.1
- Ich denke, der body-tag muss class="h-100" sowie
InformationsquelleAutor Jigar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.