Comment créer un collant pied de page qui joue bien avec Bootstrap 3

Avec ou sans top nav, il est très courant pour les sites à avoir un collant pied de page. Bootstrap a une facilité à créer facilement des fixe pieds de page, mais aucun établissement de ce genre pour la création de collant pieds de page - il y a une grande différence.

Googler cette question révèle que des centaines si pas des milliers de développeurs ont la même question, mais avec pas de bonne réponse.

Ironiquement, le Bootstrap, documentation page elle-même a un collant pied de page à côté de "bootstrap" de style et une barre de navigation supérieure fixe. C'est tous les css personnalisée, cependant, et ne fait pas partie du cadre. Donc une voie la plus évidente est de prendre et de refactoriser leur style personnalisé, car il est évident qu'elle joue bien dans le Bootstrap cadre, mais qui semble de plus en plus pénible qu'elle devrait être.

Voir cette plunkr pour un exemple de page avec un Bootstrap haut barre de navigation, et un indésirable, non-collant, pied de page.

Problème:

(Merci Softlayer - pour la graphiques)

Comment créer un collant pied de page qui joue bien avec Bootstrap 3

Solution Souhaitée:

Comment créer un collant pied de page qui joue bien avec Bootstrap 3

Bien sûr, le pied de page doit être réactive et de la croix-navigateur, sympa aussi...

InformationsquelleAutor Robert Christian | 2013-11-03
  1. 77

    La réponse, comme Schmalzy points, peut être trouvé ici dans la section exemples de la getbootstrap site.

    Mais cet exemple ne comporte pas de haut nav. Fixe en haut de nav avec collant, pied de page, voir cette plnkr, ou le code ci-dessous.

    De 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>
    InformationsquelleAutor Robert Christian
  2. 24

    Collant pied de page des solutions qui reposent sur des fixe-hauteur des pieds de page sont à tomber hors de la faveur avec des approches sensibles aux (où la hauteur de pied de page souvent des changements à différents points de rupture). Le plus simple responsive sticky footer solution que j'ai vu, 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/

    • display: table est le chemin à parcourir
    InformationsquelleAutor Chris Peckham
  3. 19

    Le meilleur moyen est de faire ce qui suit:

    HTML:Collant Pied De Page

    CSS: CSS pour Collant, Pied de page

    Code HTML Sample:

    <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>

    Code CSS Exemple:

        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;
}

    Une autre petite astuce, il pourrait être plus parfait (dépend de votre projet), afin de ne pas affecter 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%;}}
    • remplacer position: relative avec position: fixed à le maintenir à bas lorsque le défilement vers le bas
    InformationsquelleAutor abmmhasan
  4. 15

    J'ai été la recherche d'un moyen simple de faire de l'collant pied de page fonctionne.
    J'ai juste appliqué un class="navbar-fixed-bottom" et il a travaillé instantanément
    Seule chose à garder à l'esprit que c'est pour régler les paramètres du pied de page pour les appareils mobiles.
    Cheers!

    InformationsquelleAutor Panchope
  5. 6

    Pour ceux qui sont à la recherche d'un peu de réponse, vous pouvez obtenir un simple exemple de travail à partir d'ici:

    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 la body's margin-bottom pour ajouter de l'espace entre le contenu et le pied de page.

    InformationsquelleAutor Eshanel
  6. 2

    Je vais élaborer sur ce que robodo dit dans un des commentaires ci-dessus, un très rapide et en regardant bien et ce qui est plus important, réactif (pas de hauteur fixe) approche qui n'implique pas de hacks est d'utiliser flexbox. Si vous n'êtes pas limité par les navigateurs prennent en charge 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;
}

    Prise en charge du navigateur peuvent être consultées ici: http://caniuse.com/#feat=flexbox

    Plus commun des solutions de problèmes à l'aide de flexbox: https://github.com/philipwalton/solved-by-flexbox

    InformationsquelleAutor adanski
  7. 1

    Pas sûr de ce que vous avez essayé jusqu'à présent, mais son assez simple. Faites simplement ceci: http://plnkr.co/edit/kmEWh7?p=preview

    html, body {
height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
    • Merci, cela fonctionne, mais ne couvre pas tous les cas. Par exemple, réduisez votre fenêtre verticalement, et de voir que le pied de page se déplace entre le texte du paragraphe.
    • Bien sûr, il ne! Vous voulez un collant, pied de page, donc ça va être collante vers le bas et si vous réduisez la fenêtre d'affichage, il se superpose au texte. C'est pourquoi vous devez définir la div qui contient votre contenu overflow: auto; et de lui donner un remplissage en bas au moins égale à la hauteur de votre pied de page.
    • Telle une mauvaise réponse. La Question était sur le collant, pied de page et cette réponse ne vient pas tout près d'elle.
    InformationsquelleAutor Charles Ingalls
  8. 1

    Puisque c'est dans le bootstrap 3, le site sera à l'aide de jQuery. Donc, la solution pourrait également être la suivante, au lieu d'essayer de jouer avec les complexes CSS:

    <!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 autre de prendre sur elle, j'espère que ça aide.

    Salutations.

    InformationsquelleAutor MichaelJTaylor
  9. 1

    facilement définir 

    position:absolute;
bottom:0;
width:100%;

    pour votre .le pied de page

    juste qu'il ne

    InformationsquelleAutor Amir Emad Mahmodpor
  10. 1

    Dans le cas où votre html a l' (bruts) de la structure:

    <div class="wrapper">
<div>....</div>
...
<div>....</div>
</div>
<div class="footer">
...
</div>

    alors le plus simple css qui résout le pied de page en bas de votre écran est 

    html, body {
height: 100%;
}
.wrapper {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
}

    ... où la hauteur de pied de page est 80px. calc calcule la hauteur de l'emballage pour être égale à la hauteur de la moins la hauteur du pied de page (80px) qui est hors de la .wrapper

    InformationsquelleAutor Iakovos Ouranos
  11. 0

    Ce qui a fonctionné pour moi a été l'ajout de la position par rapport à la balise html.

    html {
min-height:100%;
position:relative;
}
body {
margin-bottom:60px;
}
footer {
position:absolute;
bottom:0;
height:60px;
}
    InformationsquelleAutor Bryan Labuschagne
  12. -1
       <style type="text/css">
/* 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 -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#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;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
</style>
<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>
<p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</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>
    • Il n'est pas collant!!
    InformationsquelleAutor alpc