J'utilise le cadre twitter bootstrap depuis un certain temps maintenant et ils ont récemment mis à jour la version 3 !
Je n'arrive pas à faire tenir le pied de page collant en bas, j'ai utilisé le modèle de démarrage fourni par le site twitter bootstrap, mais toujours pas de chance, des idées ?
Si vous avez un en-tête et un pied de page, vous perdez trop d'espace sur un appareil mobile.
Si l'on se réfère à l'exemple officiel de pied de page adhésif de Boostrap3, il n'est pas nécessaire d'ajouter <div id="push"></div> et le CSS est plus simple.
Le CSS utilisé dans l'exemple officiel 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;
/* 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;
}et l'indispensable HTML :
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>Vous pouvez trouver le lien pour ce css dans la page d'accueil du site. Exemple de pied de page adhésif Le code source de l'entreprise.
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">URL complet : https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css
En plus de la CSS que vous venez d'ajouter, n'oubliez pas que vous devez ajouter l'attribut pousser le div avant de fermer le div wrap
La structure de base du HTML est la suivante
<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->
<div id="footer">
footer content here
</div> <!-- end footer -->
Si le contenu de la page est plus grand que l'affichage disponible, le pied de page sera poussé vers le bas. Je voudrais que le pied de page soit vraiment collé au bas de la page (comme navbar-fixed-bottom).
Hey @delavnog, est-ce que quelque chose comme ça pourrait marcher pour toi ? codepen.io/panchroma/pen/wMXWpY . Les seules parties importantes pour vous sont le HTML à la ligne 647 et le CSS
Voici le Code simplifié pour le pied de page autocollant à partir d'aujourd'hui parce qu'ils sont toujours en train de l'optimiser et c'est BON :
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<footer>
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>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;
}
Je suis un peu en retard sur le sujet mais je suis tombé sur ce post car je viens d'être piqué par cette question et j'ai finalement trouvé un moyen très facile de la surmonter, il suffit d'utiliser une navbar avec le navbar-fixed-bottom classe activée. Par exemple :
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>HTH
J'aime la simplicité et l'efficacité de votre réponse, qui est d'ailleurs une réponse intelligente. Beaucoup de réponses à la même question sont pleines de jquery, et de trucs compliqués. Merci.
C'est une demi-solution, mais vous devez toujours prendre soin des chevauchements du contenu de votre page si vous la redimensionnez.
@Baldráni Non, c'est une solution complète, les chevauchements fonctionnent bien si vous utilisez Bootstrap row et col dans le html du pied de page (ce que vous devriez faire de toute façon).
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.
31 votes
Exemple officiel : getbootstrap.com/examples/sticky-footer-navbar
3 votes
@memeLab pourquoi l'exemple officiel ne comporte-t-il rien concernant le corps margin-bottom : -60px ? Ou est-ce que je l'ai raté... ?
0 votes
Ajout d'un La seule solution CSS permettant une hauteur variable pour le pied de page autocollant. Je l'ai lié ici car, étant une nouvelle réponse, il se trouve en bas de la page.