Bootstrap 3 Flush pied de page en bas. pas fixe
J'utilise Bootstrap 3 pour un site que je conçois.
Je veux avoir un pied de page comme cet exemple. échantillon
Veuillez noter que je ne veux pas le réparer, donc bootstrap navbar-fixed-bottom ne résout pas mon problème. Je veux juste qu'il soit toujours au bas du contenu et aussi être réactif.
Tout guide sera très apprécié.
Modifier:
Désolé si je n'étais pas clair. Ce qui se passe maintenant est que lorsque le corps de contenu n'a pas assez de contenu. Mon pied de page se déplace vers le haut, puis il laisse un espace vide en bas.
C'est ce que j'ai pour ma barre de navigation
<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h5 id='footer-header'> SITEMAP </h3>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>News</p>
<p>contact</p>
</div>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>FAQ</p>
<p>Privacy Policy</p>
</div>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxx </h3>
<p>yyyyyyyyyyyyy</p>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxxx </h3>
<p>uuuuuuuuuuuuuuu</p>
</div>
</div>
</div>
</nav>
.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
11 réponses
Voir l'exemple ci-dessous. Cela positionnera votre pied de page pour coller au bas si la page a moins de contenu et se comporter comme un pied de page normal si la page a plus de contenu.
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
HTML
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
UPDATE : la nouvelle version de Bootstrap montre comment ajouter un pied de page collant sans ajouter de wrapper. Veuillez consulter la réponse de Jboy Flaga pour plus de détails.
Il y a une solution simplifiée de bootstrap ici (où vous n'avez pas besoin de créer une nouvelle classe): http://getbootstrap.com/examples/sticky-footer-navbar/
Lorsque vous ouvrez cette page, faites un clic droit sur un navigateur et "afficher la Source" et ouvrez le Sticky-footer-navbar.fichier css (http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css)
Vous pouvez voir que vous avez seulement besoin de ce CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Pour ce HTML
<html>
...
<body>
<!-- Begin page content -->
<div class="container">
</div>
...
<footer class="footer">
</footer>
</body>
</html>
UPDATE: cela ne répond pas directement à la question dans son intégralité, mais d'autres peuvent trouver cela utile.
C'est le code HTML pour votre pied de page réactif
<footer class="footer navbar-fixed-bottom">
<div class="container">
</div>
</footer>
Pour le CSS
footer{
width:100%;
min-height:100px;
background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}
NOTE: au moment de l'affichage de cette question, les lignes de code ci-dessus ne poussent pas le pied de page en dessous du contenu de la page; mais cela empêchera votre pied de page de ramper à mi-chemin de la page quand il y a peu de contenu sur la page. Pour un exemple qui pousse le pied de page ci dessous le contenu de la page jetez un oeil ici http://getbootstrap.com/examples/sticky-footer/
Utilisez flexbox comme vous pouvez l'utiliser à votre disposition. La solution offerte par bootstrap 4 chasse toujours le contenu de chevauchement dans la mise en page réactive, par exemple: il va casser dans la vue mobile, je tombe sur l'astuce la plus soignée est d'utiliser la démo de la solution flexbox présentée ici: ( https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) de cette façon, nous n'avons pas à traiter de problème de hauteur fixe qui est une solution obsolète maintenant...cette solution fonctionne pour bootstrap 3 et 4 selon vous utiliser.
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Pour les personnes qui luttent encore et la solution répondue ne fonctionne pas comme vous le souhaitez, voici la solution la plus simple que j'ai trouvée.
Enveloppez votre contenu principal et attribuez-lui une hauteur de vue minimale. Ajustez le 60 à la valeur dont votre style a besoin.
<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>
C'est ça et ça marche plutôt bien.
Galen Gidman a posté une très bonne solution au problème d'un pied de page collant réactif qui n'a pas de hauteur fixe. Vous pouvez trouver sa solution complète sur son blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
HTML
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
CSS
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded { height: 100%; }
Cette méthode utilise un balisage minimal. Il suffit de mettre tout votre contenu dans un .wrapper qui a un padding-bottom et un margin-bottom négatif égal à la hauteur du pied de page (dans mon exemple 100px).
html, body {
height: 100%;
}
/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */
.wrapper {
min-height: 100%;
height: auto;
margin: 0 auto -100px;
padding-bottom: 100px;
}
.footer {
height: 100px;
}
<body>
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
</body>
Pour Bootstrap:
<div class="navbar-fixed-bottom row-fluid">
<div class="navbar-inner">
<div class="container">
Text
</div>
</div>
</div>
Le défaut majeur des solutions ci-dessus est qu'elles ont une hauteur fixe pour le pied de page.
Et cela ne suffit pas dans le monde réel, où les gens utilisent un nombre de Zillion d'appareils et ont cette mauvaise habitude de les faire tourner quand vous vous y attendez le moins et * * pouf! * * voilà le contenu de votre page derrière le pied de page!
Dans le monde réel, vous avez besoin d'une fonction qui calcule la hauteur du pied de page et ajuste dynamiquement le contenu de la page padding-bottom pour s'adapter cette hauteur.
Et vous devez exécuter cette petite fonction sur les événements de la page load et resize ainsi que sur le pied de page DOMSubtreeModified (juste au cas où votre pied de page serait mis à jour dynamiquement de manière asynchrone ou qu'il contienne des éléments animés qui changent de taille lorsqu'il interagit avec).
Voici une preuve de concept, en utilisant jQuery v3.0.0 et Bootstrap v4-alpha, mais il n'y a aucune raison pour que cela ne fonctionne pas sur les versions inférieures de chacun.
jQuery(document).ready(function( $ ) {
$.fn.accomodateFooter = function(){
var footerHeight = $('footer').outerHeight();
$(this).css({'padding-bottom':footerHeight+'px'});
}
// accomodate footer after its html has changed
$('footer').on('DOMSubtreeModified', function(){
$('body').accomodateFooter();
})
// accomodate footer on page load and resize
$(window).on('load resize', function(){
$('body').accomodateFooter();
})
$('body').accomodateFooter();
window.addMoreContentToFooter = function() {
var f = $('footer');
f.append($('<p />',{
text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."}))
.append($('<hr />'));
}
});body {
min-height: 100vh;
position: relative;
padding-top: 54px;
}
footer {
background-color: rgba(0,0,0,.65);
color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
display: block;
}
footer hr {
border-top: 1px solid rgba(0,0,0,.42);
border-bottom: 1px solid rgba(255,255,255,.21);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Feed that footer - not a game (yet!)</h1>
<p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
</div>
</div>
<footer>I am a footer with dynamic content.
<hr />Initialement, j'ai posté ceci solution ici mais j'ai réalisé que cela pourrait aider plus de gens si posté sous cette question.
Note: j'ai délibérément enveloppé le $([selector]).accomodateFooter() en tant que plugin jQuery, donc il pourrait être exécuté sur n'importe quel élément DOM, car dans la plupart des mises en page ce n'est pas le bottom-padding de $('body') qui doit être ajusté, mais un élément d'encapsulation de page avec position:relative (généralement le parent immédiat du footer).
Aucune de ces solutions n'a parfaitement fonctionné pour moi car j'ai utilisé la classe navbar-inverse dans mon pied de page. Mais j'ai eu une solution qui a fonctionné et sans Javascript. Chrome utilisé pour aider à former des requêtes de médias. La hauteur du pied de page change à mesure que l'écran se redimensionne, vous devez donc faire attention à cela et ajuster en conséquence. Votre contenu de pied de page (j'ai défini id="footer" pour définir mon contenu) devrait utiliser postion=absolute et bottom=0 pour le garder en bas. Aussi largeur: 100%. Voici mon CSS avec les requêtes des médias. Vous devrez ajuster min-width et max-width et ajouter ou supprimer certains éléments:
#footer {
position: absolute;
color: #ffffff;
width: 100%;
bottom: 0;
}
@media only screen and (min-width:1px) and (max-width: 407px) {
body {
margin-bottom: 275px;
}
#footer {
height: 270px;
}
}
@media only screen and (min-width:408px) and (max-width: 768px) {
body {
margin-bottom: 245px;
}
#footer {
height: 240px;
}
}
@media only screen and (min-width:769px) {
body {
margin-bottom: 125px;
}
#footer {
height: 120px;
}
}
Ou Ceci
<footer class="navbar navbar-default navbar-fixed-bottom">
<p class="text-muted" align="center">This is a footer</p>
</footer>