Comment créer un pied collant qui fonctionne bien avec Bootstrap 3
Avec ou sans top nav, il est très courant pour les sites d’avoir un pied de page collant. Bootstrap permet de créer facilement des pieds de page fixes , mais aucune installation de ce type pour créer collant les pieds de page - il y a une grande différence.
Googler cette question révélera que des centaines sinon des milliers de développeurs ont la même question mais sans bonne réponse.
Ironiquement, la page documentation Bootstrap a un pied de page collant à côté du style bootstrap et une barre de navigation supérieure fixe. Cependant, tout est personnalisé et ne fait pas partie du framework. Il est donc évident de choisir et de reformuler leur style personnalisé, car il joue bien dans le cadre de Bootstrap, mais cela semble plus douloureux qu’il ne devrait l’être.
Voir this plunkr pour un exemple de page avec une barre de navigation supérieure Bootstrap _ et un pied de page indésirable et non collant.
Problème:
(Merci Softlayer - pour le graphisme )
Solution souhaitée:
Bien sûr, le pied de page doit également être réactif et inter-navigateurs ...
La réponse, comme le souligne Schmalzy, peut être trouvée ici dans la section exemples du site getbootstrap.
Mais cet exemple n'inclut pas un top nav. Pour une navigation supérieure fixe avec un pied collant, voir this plnkr, ou le code ci-dessous.
Style CSS:
/* Styles go here */
/* 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;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- 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>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-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>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Les solutions de pied de page collant qui reposent sur des pieds de page à hauteur fixe ne sont plus populaires avec les approches réactives (où la hauteur du pied de page change souvent à différents points de rupture). La solution de pied de page collante réactive la plus simple que j'ai vue implique l'utilisation de display: table sur un conteneur de niveau supérieur, par exemple:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
Le meilleur moyen est de procéder comme suit:
HTML: Sticky Footer
CSS: CSS pour Sticky Footer
Exemple de code HTML:
<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>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
Exemple de code CSS:
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;
}
Un autre petit Tweak pourrait le rendre plus parfait (dépend de votre projet), ainsi il n'affectera pas le pied de page sur les vues mobiles.
@media (max-width:768px){ .footer{position:absolute;width:100%;} }
@media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
Je cherchais un moyen simple de faire fonctionner le pied de page collant. Je viens d’appliquer un class="navbar-fixed-bottom "et cela a fonctionné instantanément. La seule chose à garder à l’esprit, c’est d’ajuster les paramètres du pied de page pour les appareils mobiles.
Pour ceux qui recherchent une réponse légère, vous pouvez obtenir un exemple simple et pratique à partir de là :
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px /* Height of the footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* Example value */
}
Il suffit de jouer avec le margin-bottom de body pour ajouter de l'espace entre le contenu et le pied de page.
J'expliquerai ce que robodo a dit dans l'un des commentaires ci-dessus, une approche très rapide et esthétique et, surtout, une approche réactive (à hauteur fixe) qui n'implique aucun piratage, consiste à utiliser une boîte souple. Si vous n'êtes pas limité par le support des navigateurs, c'est une excellente solution.
HTML
<body>
<div class="site-content">
Site content
</div>
<footer class="footer">
Footer content
</footer>
</body>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
Le support du navigateur peut être vérifié ici: http://caniuse.com/#feat=flexbox
Problèmes plus courants utilisant flexbox: https://github.com/philipwalton/solved-by-flexbox
Comme il est dans bootstrap 3, le site utilisera jQuery. La solution pourrait donc aussi être la suivante, au lieu d’essayer de jouer avec des CSS complexes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.my-footer {
border-radius : 0px;
margin : 0px; /* pesky margin below .navbar */
position : absolute;
width : 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Content of any length -->
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
</div>
</div>
<div class="navbar navbar-inverse my-footer">
<div class="container-fluid">
<div class="row">
<p class="navbar-text">My footer content goes here...</p>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $docH = $(document).height();
// The document height will grow as the content on the page grows.
$('.my-footer').css({
/*
The default height of .navbar is 50px with a 1px border,
change this 52 if you change the height of your footer.
*/
top: ($docH - 52) + 'px'
});
});
</script>
</body>
</html>
Une approche différente, espérons que cela aidera.
Sincères amitiés.
facilement mis
position:absolute;
bottom:0;
width:100%;
à votre .footer
simplement fais-le
Si votre code HTML a la structure (brute):
<div class="wrapper">
<div>....</div>
...
<div>....</div>
</div>
<div class="footer">
...
</div>
alors le plus simple css qui corrige le pied de page au bas de votre écran est
html, body {
height: 100%;
}
.wrapper {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
}
... où la hauteur du pied de page est de 80px. calc calcule la hauteur de l'emballage pour qu'elle soit égale à la hauteur de la fenêtre moins la hauteur du pied de page (80px) qui se trouve en dehors du .wrapper
Pas sûr de ce que vous avez essayé jusqu'à présent, mais c'est assez simple. Faites simplement ceci: http://plnkr.co/edit/kmEWh7?p=preview
html, body {
height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Ce qui a fonctionné pour moi a été d’ajouter la position relative à la balise html.
html {
min-height:100%;
position:relative;
}
body {
margin-bottom:60px;
}
footer {
position:absolute;
bottom:0;
height:60px;
}