Je souhaite vous partager ma solution pour un pied de page fixe, sans JavaScript requis (une alternative à cette demande), en supposant que vous connaissez la hauteur de votre pied de page. J’ai ajouté 100 px supplémentaires au mien pour créer un espace entre le contenu et le pied de page.
Si vous avez un pied de page plus grand avec plusieurs colonnes, vous devriez définir une hauteur fixe différente dans votre onglet mobile.
Étape 1 : Collez ceci dans votre onglet CSS commun
body {
position: relative;
}
#main {
margin-bottom: 350px; /* égal à la hauteur du pied de page – modifiez-le selon vos besoins, dans les onglets commun et mobile */
}
#sticky-footer {
padding: 50px 0;
background: var(--header_background); /* facultatif */
color: var(--primary-medium); /* facultatif */
text-align: center; /* facultatif */
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
Étape 2 : Allez dans votre onglet </body> et collez votre code HTML de pied de page à l’intérieur
Exemple :
<div id="sticky-footer">
<div class="wrap">
<!-- votre contenu de pied de page ici -->
</div>
</div>
C’est tout . Votre pied de page restera maintenant fixé en bas de votre page, même sur les pages avec peu de contenu.
Voici à quoi ressemble notre pied de page sur une page avec peu de contenu :
C’est à toi de me dire, Jeff .. faut-il installer des composants pour chaque code HTML et CSS supplémentaire ?
Ce n’est pas un tutoriel sur « comment créer un pied de page », mais plutôt une solution alternative rapide pour coller un pied de page en bas de la page, pour ceux qui souhaitent créer leur propre pied de page.
Hmm, je pense qu’on veut que les gens utilisent les composants de thème chaque fois que possible, car ils sont « officiels » de notre part et bénéficient donc d’un support complet, de mises à jour automatiques, etc. Qu’en pensent @awesomerobot@Johani et @jordan.vidrine ?
Oui, si le composant de pied de page officiel correspond à vos besoins, c’est pratique car nous le tenons à jour pour vous, mais certaines personnes préféreront une mise en page différente.
J’ai déjà fait quelque chose de similaire par le passé… le processus est semblable à celui décrit par l’OP. Vous devez définir la hauteur de #main-outlet à 100 % de la hauteur de la fenêtre d’affichage (100vh) moins la hauteur du pied de page et de l’en-tête. Ainsi, sur les pages courtes, votre pied de page sera positionné tout en bas.
#main-outlet {
box-sizing: border-box; // inclut le padding dans le calcul de la hauteur
}
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
Contenu de mon pied de page
</script>
<script type="text/discourse-plugin" version="0.8">
api.decoratePluginOutlet(
"below-footer",
(elem, args) => {
let headerHeight = document.querySelector(".d-header").offsetHeight;
let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
let mainOffset = headerHeight + footerHeight;
document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
}
);
</script>
Cela se pose assez souvent pour qu’il vaille probablement la peine d’implémenter automatiquement quelque chose de similaire dans le cœur du système s’il y a du contenu dans footer.html ou dans l’un des deux emplacements de plugin de pied de page.
Bien qu’il serait préférable de le créer comme un composant de thème à la place. (cliquez sur le bouton d’installation et ‘créer nouveau’ à partir de là)
. Votre pied de page restera maintenant fixé en bas de votre page, même sur les pages avec peu de contenu.
.. faut-il installer des composants pour chaque code HTML et CSS supplémentaire ?
