web-dev-qa-db-fra.com

Bootstrap 4 Pied de page collant ne colle pas

Pas vraiment sûr pourquoi le pied de page collant ne fonctionne pas dans Bootstrap 4.). J'ai un site Web TYPO3 où je suis débutant.

Le pied de page collant ne colle pas au bas de la page.

Voici une copie de la source de la page telle qu’elle a été rendue.

En gros, j'ai copié le fichier html du dossier d'amorçage docs, puis je l'ai modifié et copié dans mon modèle TYPO3.

Si je remplis la page de contenu, le pied de page ne colle pas - je dois faire défiler la page vers le bas pour le voir.

<!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>
htmlcsstypo3bootstrap-4sticky-footer
27
Daryn

J'ai réussi à comprendre. J'ai peut-être un malentendu sur ce qu'est "Sticky" ou quelque chose du genre, mais la solution consistait à changer de manière absolue -> corrigé dans le fichier CSS.

par exemple. de:

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

à:

.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

Mise à jour 2018 - Bootstrap 4.0.0

Maintenant que Bootstrap 4.0 est une flexbox, il est plus facile d’utiliser flexbox pour le pied de page collant.

<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;
}

Démo: Bootstrap 4 Sticky Footer (4.0.0)

Remarque: Le flex-fill La classe d'utilitaires sera incluse dans la prochaine Bootstrap 4.1 version. Ainsi, après cette version, le CSS supplémentaire pour flex-fill ne sera plus nécessaire.

Voir aussi: Bootstrap 4 - Pied de page collant - Hauteur de pied de page dynamique

28
Zim

L'exemple dans Bootstrap 4 docs présente le code CSS suivant:

/* 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;
}

Vous avez probablement oublié de définir html { position: relative; min-height: 100%; } - Je sais que j'oublie généralement cette partie.

26
Benjineer

Dans Bootstrap 4, utilisez la classe fixed-bottom pour coller votre pied de page. Aucun CSS personnalisé requis:

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

Cela devrait résoudre le problème. Il est similaire à Benjineer answer mais ready bootstrap class. Testé avec Bootstrap 4.3.1

2
Jigar