Bootstrap 4 Sticky Footer ne colle pas

Question

Bootstrap 4 Sticky Footer ne colle pas

Demandé el 13 de Octobre, 2017: Quand la question a-t-elle été
34392 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Je ne sais pas vraiment pourquoi le sticky footer ne fonctionne pas dans Bootstrap 4. J'ai un site Web TYPO3, pour lequel je suis un débutant.

Le pied de page collant n'est pas collé au bas de la page.

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

J'ai essentiellement copié le fichier html du dossier docs de bootstraps, puis je l'ai modifié et copié dans mon modèle TYPO3.

Si je remplis la page de contenu, le pied de page ne tient 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="stackoverflow.com/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
    href="stackoverflow.com/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
    media="all">
<link rel="stylesheet" type="text/css"
    href="stackoverflow.com/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>

Demandé el 13 de Octobre, 2017 par Daryn

1 votes

Veuillez vérifier les chemins de vos fichiers CSS...

Commenté el 13 de Octobre, 2017 par sajee

0 votes

@sajee Les chemins des fichiers sont corrects. J'ai vérifié en allant voir la source -> puis en cliquant sur chacun d'entre eux pour voir s'ils chargent le texte et ils le font.

Commenté el 13 de Octobre, 2017 par Daryn

0 votes

Lorsque je vérifie votre extrait de code, aucun style n'est appliqué au contenu HTML.

Commenté el 13 de Octobre, 2017 par sajee

Answer 1

5 Réponses

Answer 2

94voto

Skelly Points 27772

Mise à jour 2018 - Bootstrap 4.0.0

Maintenant que Bootstrap 4.0 est flexbox, il est plus facile d'utiliser la flexbox pour le pied de page autocollant.

<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émonstration : Bootstrap 4 Sticky Footer (4.0.0)

Note : Le site flex-fill La classe d'utilité sera inclus dans le prochain Bootstrap 4.1 release. Ainsi, après cette version, le CSS supplémentaire pour le flex-fill ne sera plus nécessaire.

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

Répondu el 29 de Mars, 2018 par Skelly (27772 Points )

17 votes

C'est le seul moyen correct pied de page adhésif parmi ces réponses (fixé au bas de la page lorsque le contenu est inférieur à une page, sinon il est poussé vers le bas au-delà du contenu jusqu'à ce que l'utilisateur fasse défiler la page jusqu'au bas) ; les autres sont des pieds de page à fond fixe (toujours visibles au-dessus du contenu, fixés au bas du navigateur pendant le défilement)

Commenté el 9 de Mars, 2019 par nickckaye

1 votes

Vous pourriez utiliser min-vh-100 au lieu de la classe sticky-footer-wrapper

Commenté el 29 de Octobre, 2019 par ziomyslaw

1 votes

Merci, c'est la meilleure réponse à la question : mais la classe sticky-footer-wrapper est-elle vraiment nécessaire ? Le flex-fill remplit déjà l'espace en poussant le pied de page vers le bas.

Commenté el 12 de Février, 2020 par diogui

Afficher 3 autres commentaires

Answer 3

46voto

Daryn Points 615

J'ai réussi à le comprendre. Peut-être que j'ai un malentendu sur ce que "Sticky" est ou quelque chose, mais la solution était de changer absolu -> fixe 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;
}

Répondu el 13 de Octobre, 2017 par Daryn (615 Points )

0 votes

Oui, cela fonctionne correctement lorsque l'on utilise un contenu défilant dans Bootstrap 4.1.3.

Commenté el 14 de Septembre, 2018 par Guus

0 votes

Merci @Daryn solution intelligente !

Commenté el 25 de Janvier, 2019 par nicowi

24 votes

Este es no un pied de page collant (fixé au bas de la page lorsque le contenu est inférieur à une page, sinon il est poussé vers le bas au-delà du contenu jusqu'à ce que l'utilisateur fasse défiler la page jusqu'au bas) ; il s'agit d'un pied de page à fond fixe (toujours visible au-dessus du contenu, fixé au bas du navigateur pendant le défilement)

Commenté el 9 de Mars, 2019 par nickckaye

Answer 4

38voto

benjineer Points 96

L'exemple dans le Documentation sur Bootstrap 4 a le 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 régler html { position: relative; min-height: 100%; } - Je sais que j'oublie souvent cette partie.

Répondu el 20 de Mars, 2018 par benjineer (96 Points )

0 votes

Cette réponse devrait être la bonne, car elle permet de remédier au problème de Bootstrap 4.0, qui ne mentionne pas l'option html Exigences CSS.

Commenté el 7 de Juin, 2019 par Ryan

0 votes

Consultez l'explication ici :) freecodecamp.org/news/

Commenté el 17 de Juin, 2019 par jdnichollsc

0 votes

Ce n'est pas une bonne solution, car pour que cela fonctionne, vous devez remplacer body margin : 0 ; défini dans reboot. getbootstrap.com/docs/4.0/content/reboot

Commenté el 20 de Août, 2019 par Jason Honingford

Answer 5

18voto

shacker Points 3348

Dans Bootstrap 4, utilisez l'élément fond fixe pour coller votre pied de page. Aucune CSS personnalisée n'est nécessaire :

<footer class="footer fixed-bottom">
    ...
</footer>

Répondu el 16 de Octobre, 2018 par shacker (3348 Points )

1 votes

Ce n'est pas bon, avec "fixed-bottom" le pied de page couvrira tous les autres éléments si la page est assez courte...

Commenté el 26 de Octobre, 2018 par G_G

1 votes

Cela a bien fonctionné pour moi. Pour résoudre le problème soulevé par @GianlucaGhettini, j'ai simplement ajouté un fond à <footer> et padding-bottom à <body> (de même que vous devez définir padding-top sur <body> lorsque vous utilisez une barre de navigation fixe).

Commenté el 30 de Novembre, 2018 par Akaoni

12 votes

Este es no un pied de page collant (fixé au bas de la page lorsque le contenu est inférieur à une page, sinon il est poussé vers le bas au-delà du contenu jusqu'à ce que l'utilisateur fasse défiler la page jusqu'au bas) ; il s'agit d'un pied de page à fond fixe (toujours visible au-dessus du contenu, fixé au bas du navigateur pendant le défilement)

Commenté el 9 de Mars, 2019 par nickckaye

Answer 6

6voto

Jigar Points 2260

<html class="h-100">
.
.
</html>

Cela devrait résoudre le problème. C'est similaire à Benjineer's Réponse mais classe bootstrap prête. Testé avec Bootstrap 4.3.1

Répondu el 15 de Mars, 2019 par Jigar (2260 Points )

1 votes

Je pense que la balise body doit class="h-100" également

Commenté el 20 de Mai, 2019 par Henry

0 votes

Si vous regardez de près au exemple c'est dans la source, j'ai juste réussi à le manquer. Merci.

Commenté el 25 de Mai, 2021 par timelmer

Bootstrap 4 Sticky Footer ne colle pas

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Bootstrap 4 Sticky Footer ne colle pas

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: