webentwicklung-frage-antwort-db.com.de

Bootstrap 4 Sticky Footer Not Sticking

Ich bin mir nicht sicher, warum die klebrige Fußzeile nicht funktioniert. Bootstrap).

Die klebrige Fußzeile klebt nicht am unteren Rand der Seite.

Hier ist eine Kopie der Seitenquelle, wie sie gerendert wurde.

Ich habe im Grunde genommen die HTML-Datei aus dem Ordner bootstraps docs kopiert und sie dann geändert und in meine TYPO3-Vorlage kopiert.

Wenn ich die Seite mit Inhalt fülle, bleibt die Fußzeile nicht hängen - ich muss die Seite nach unten scrollen, um sie zu sehen.

<!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>
27
Daryn

Hat es geschafft, es herauszufinden. Vielleicht habe ich ein Missverständnis darüber, was "Sticky" ist oder so, aber die Lösung war, absolut zu ändern -> in der CSS-Datei behoben.

z.B. von:

.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;
}
37
Daryn

Update 2018 - Bootstrap 4.0.0

Nun, da Bootstrap 4.0 flexbox ist, ist es einfacher, flexbox für die klebrige Fußzeile zu verwenden.

<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: Das flex-fill Utility-Klasse wird in der nächsten Version enthalten sein Bootstrap 4.1 . Nach dieser Version wird das zusätzliche CSS für Flex-Fill nicht mehr verfügbar sein erforderlich.

Siehe auch: Bootstrap 4 - Sticky Footer - Dynamic Footer Height

28
Zim

Das Beispiel in den Bootstrap 4-Dokumenten hat das folgende 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;
}

Sie haben wahrscheinlich vergessen, html { position: relative; min-height: 100%; } - Ich weiß, dass ich diesen Teil normalerweise vergesse.

26
Benjineer

Verwenden Sie in Bootstrap 4 die Klasse fixed-bottom , um Ihre Fußzeile zu fixieren. Es ist kein benutzerdefiniertes CSS erforderlich:

<footer class="footer fixed-bottom">
    ...
</footer>
11
shacker
<html class="h-100">
.
.
</html>

Dies sollte das Problem lösen. Es ist ähnlich wie Benjineers answer, aber ready bootstrap class. Getestet mit Bootstrap= 4.3.1

2
Jigar