Je suis généralement familier avec la technique de nettoyage d'un pied de page à l'aide de css.
Mais j'ai du mal à faire fonctionner cette approche pour Twitter bootstrap, probablement en raison du fait que Twitter bootstrap est de nature réactive. Avec Twitter bootstrap, je ne parviens pas à faire affleurer le pied de page au bas de la page en utilisant l'approche décrite dans l'article de blog ci-dessus.
Cette fonction est désormais incluse dans la version 2.2.1 de Bootstrap.
Bootstrap 3.x
Utilisez le composant navbar et ajoutez .navbar-fixed-bottom classe :
<div class="navbar navbar-fixed-bottom"></div>Bootstrap 4.x
<div class="navbar fixed-bottom"></div>N'oubliez pas d'ajouter body { padding-bottom: 70px; } ou sinon le contenu de la page peut être couvert.
Docs : http://getbootstrap.com/components/#navbar-fixed-bottom
@LawrenceWoodman Uugh Je viens de m'en rendre compte. Mon erreur. Il s'avère que j'ai plus ou moins mis en œuvre sticky footer avant de mettre dans navbar-static-bottom. Donc je pensais que la classe fonctionnait vraiment Bon sang ! Oh et, navbar-fixed-bottom n'est pas vraiment ce que l'OP demandait de toute façon.
J'ai trouvé les extraits ici fonctionne très bien pour bootstrap
Html :
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>CSS :
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
Bonjour, j'ai implémenté cette méthode, elle fonctionne très bien mais maintenant j'ai quelques problèmes avec l'affichage de la page sur iphone (la page est zoomée). Avez-vous une idée de ce qui se passe ? Voici quelques détails : stackoverflow.com/questions/18621090/
Au cas où vous auriez lu cette réponse et n'auriez pas fait défiler le texte, il est utile de consulter les autres réponses.
Un exemple fonctionnel pour Twitter bootstrap PIED DE PAGE NON COLLANT
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight)
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>Version qui se met toujours à jour si l'utilisateur ouvre devtools ou redimensionne la fenêtre.
<script>
$(document).ready(function() {
setInterval(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
var marginTop = (docHeight - footerTop + 10);
if (footerTop < docHeight)
$('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
else
$('#footer').css('margin-top', '0px');
// console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
}, 250);
});
</script>#footer
Si vous ne voulez pas de la barre de défilement si le contenu s'adapte à l'écran, il suffit de changer la valeur de 10 à 0.
La barre de défilement s'affiche si le contenu n'est pas adapté à l'écran.
Alternativement, pour que le pied de page reste en place et affleure le fond, modifiez margin-top a padding-bottom dans le JS.
Ouais, je suis allé avec celui-ci aussi. Les CSS peuvent être tellement stupides parfois. Ce n'est pas que c'est impossible, mais les solutions d'usage général peuvent être difficiles à trouver, et réparer des choses ennuyeuses comme ça dans nos mises en page ne devrait pas nécessiter des voyages à l'échange de piles, de multiples révisions de gist, des tests inter-navigateurs, et finalement l'abandon à une simple astuce JS. Oui, je me sens un peu sale, mais au moins ça marche.
Toutes les solutions que j'ai examinées sont fausses. C'est la SEULE solution qui fait réellement ce qu'elle est censée faire - coller le pied de page en bas de la page, sans masquer le contenu si le navigateur est redimensionné.
Para Pied de page collant nous utilisons deux DIV's dans le HTML de base pied de page adhésif effet. Écrivez comme ceci :
HTML
<div class="container"></div>
<div class="footer"></div>CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
Il a dit qu'il utilisait Twitter Bootstrap. Quel serait le moyen le plus simple d'intégrer cette fonctionnalité dans Bootstrap sans réécrire complètement le code HTML ?
Voici comment le mettre en œuvre à partir de la page officielle :
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Je viens de le tester et il fonctionne à merveille :)
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<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>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>Le code CSS correspondant est le suivant :
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
Merci de l'avoir publié, c'était sans aucun doute la meilleure solution (pour ne pas dire la seule qui fonctionnait) pour mon projet particulier, et bien sûr, c'est bien que cela provienne directement du projet lui-même.
Je ne sais pas ce qui se passe, mais je n'ai pas réussi à le faire fonctionner sans ajouter un défilement aux pages. J'ai fini par modifier le CSS du .wrapper pour que la hauteur minimale soit "calc(100% - 120px)" où 120px est la hauteur de mon pied de page et j'ai supprimé le <div id="push"></div> du html puisqu'il ne semblait rien faire à part ajouter de la hauteur à la page dont je n'avais pas besoin.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Avant de tester toutes les réponses ci-dessous, gardez à l'esprit que le PO veut que cela fonctionne avec twitter bootstrap.Comme ce n'est pas une obligation, twitter bootstrap fonctionne avec Jquery, ce qui signifie qu'il est Javascript activé.Pour cette raison, il suffit de tester ma réponse : stackoverflow.com/questions/10099422/
4 votes
Exemple officiel : getbootstrap.com/examples/sticky-footer-navbar/
1 votes
Le lien est cassé ! Quelqu'un peut-il réparer le lien de l'exemple officiel ?
1 votes
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar Il se peut que la version 4.0 devienne plus ancienne à l'avenir, je suppose.
0 votes
Lien vers la dernière version getbootstrap.com/docs/5.1/examples/sticky-footer
0 votes
9 ans. toujours un énorme problème. pourquoi est-il si compliqué d'intégrer un pied de page au bas d'une page ?