Twitter Bootstrap 3 Sticky Footer
J'ai été en utilisant twitter bootstrap cadre pour un certain temps maintenant, et ils ont récemment mis à jour vers la version 3!
Je vais avoir de la difficulté à obtenir le collant pied de page à coller au fond, j'ai utilisé le modèle de démarrage fourni par le twitter bootstrap site, mais toujours pas de chance, des idées?
- officiel exemple: getbootstrap.com/examples/sticky-footer-navbar
- pourquoi l'officiel exemple, ne pas avoir quelque chose sur le corps margin-bottom: -60px? Ou ai-je manquer...?
- Ajout d'un CSS seule solution permettant à hauteur variable pour collant, pied de page. Elle est reliée par ici, comme, étant une nouvelle réponse, c'est au bas de la page.
Vous devez vous connecter pour publier un commentaire.
il suffit d'ajouter la classe navbar-fixed-bas à votre pied de page.
Se référant à la officiel Boostrap3 sticky footer exemple,
il n'est pas nécessaire d'ajouter
<div id="push"></div>
, et le CSS est plus simple.Le CSS utilisé officiel de l'exemple est :
et l'essentiel HTML :
Vous pouvez trouver le lien de cette css dans le collant-exemple de pied de pagecode source.
URL complète :
http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
Voici une méthode qui vous permettra d'ajouter un collant pied de page qui n'a pas besoin d'aucun autre CSS ou Javascript, d'autres que ce qui est déjà dans le Bootstrap et ne sera pas interférer avec votre pied de page.
Exemple ici: Facile Collant Pied De Page
Il suffit de copier et de les coller directement dans votre code. Pas de chichi, pas de muss.
En plus de la CSS que vous venez d'ajouter, n'oubliez pas que vous devez ajouter le pousser div avant de fermer l'enveloppe div
La structure de base pour le HTML est
Vue en direct
Modifier l'affichage
Je suis un peu en retard sur le sujet mais je suis tombé sur ce post que j'ai juste été mordu par cette question, et, finalement trouvé un moyen facile d'obtenir sur elle, il suffit d'utiliser un
navbar
avec lenavbar-fixed-bottom
classe activé. Par exemple:HTH
Voici la Collant Pied de page de code simplifié à compter d'aujourd'hui, car ils sont toujours optimisation, et c'est BON:
HTML
CSS
Voici ma mise à jour de la solution à ce problème.
Et de l'utiliser comme ceci:
Ou
some text<br>
lignes avant le pied de page et la taille en bas de la fenêtre.Le collant exemple ne fonctionne pas pour moi.
Ma solution:
Le pousser
div
devrait aller à droite après lawrap
, PAS à l'intérieur.. juste comme ceRépondu par l'OP:
Ajouter ceci à votre fichier CSS.
Je voulais un souple, collant, pied de page, c'est pourquoi je suis venu ici. Top des réponses m'a mis dans la bonne direction.
Courant (2 Oct 16) Bootstrap 3 css Collant pied de page (de taille Fixe) ressemble à ceci:
Aussi longtemps que le pied de page a une taille fixe, le corps margin-bottom crée une poussée pour permettre une poche pour le pied de page pour s'asseoir. Dans ce cas, les deux sont mis à 60px. Mais si le pied de page n'est pas fixe et dépasse 60px hauteur, il couvre le contenu de votre page.
Rendre Flexible: permet de Supprimer le css corps de la marge et du pied de hauteur. Puis ajouter le JavaScript pour obtenir le pied de la hauteur et de définir le corps marginBottom. Ce qui est fait avec le setfooter() fonction. Ajoutez ensuite les écouteurs d'événement pour quand la page se charge tout d'abord et sur le redimensionnement d'exécuter les setfooter. Remarque: Si vous avez le pied de page a un accordéon ou quoi que ce soit d'autre qui déclenche un changement de taille, sans redimensionnement de la fenêtre, vous devez appeler le setfooter() la fonction de nouveau.
Exécuter l'extrait de code et puis plein écran à la démo il.
JS:
CSS:
HTML:
Cela a été résolu par flexbox, une fois et pour toujours:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Le code HTML
Le CSS
Simple js
Mise à jour #1
De Résumer tous ces, il suffit de garder une chose à l'esprit que tout, sauf le pied de page doit avoir
min-height: 100%
ou un peu moins.J'écris mon simplifié collant pied de page de code avec un rembourrage en utilisant MOINS. Cette réponse est probablement hors-sujet, car la question ne parle pas de rembourrage, donc si vous êtes intéressé vérifier ce post pour plus de détails.
Basé sur Jek-fdrv réponse, j'ai ajouté un
.on('resize', function()
pour vérifier qu'il fonctionne sur chaque appareil et chaque résolution:La version actuelle de bootstrap ne semble pas fonctionner pour cette fonction plus. Si vous téléchargez leur collant-pied de page-navbar exemple et une grande quantité de contenu dans le corps de la zone de pied de page seront poussés vers le passé le bas de la fenêtre d'affichage. Il n'est pas du tout collante.
Voici une CSS en fonction de la solution pour répondre pleinement la variable de hauteur collant pied de page.
Avantage: pied de page permet de varier la hauteur, la hauteur n'a plus besoin d'être codé en dur dans le code CSS.
CSS:
HTML:
Et voici l'onu précédé d'
SCSS
(pourgulp
/grunt
):Suffit d'utiliser flex! Assurez-vous d'utiliser le corps et main dans votre code HTML et c'est l'une des meilleures solutions (sauf si vous avez besoin d'IE9 l'appui). Il ne nécessite pas une hauteur fixe ou similaire.
Qui est recommandé pour les Matérialiser ainsi!
en Haml & Sass mots tout ce qui est nécessaire:
Haml pour
app/view/layouts/application.html.haml
Sass pour
app/assets/stylesheets/application.css.sass
basé sur http://getbootstrap.com/examples/sticky-footer-navbar/
Si vos souhaitez utiliser bootstrap construire dans les classes pour le pied de page. Vous devez également écrire du javascript:
Elle permettra d'éviter le contenu de chevauchement par le pied de page fixe, et il ajuste la
padding-bottom
lorsque l'utilisateur change de la fenêtre/taille de l'écran.Dans le script ci-dessus, je suppose que le pied de page est placé directement à l'intérieur de la balise body comme ça:
Ce n'est certainement pas la meilleure solution (à cause de la JS qui pourrait être évité), mais il fonctionne sans aucun problème avec les doubles emplois, il est facile à mettre en œuvre et réactif (
height
n'est pas codé en dur dans le CSS).CSS:
HTML:
Ici est très simple et propre, collant, pied de page que vous pouvez utiliser dans le bootstrap. Totalement Responsive!
HTML
CSS
Exemple: CodePen Démo
À l'aide de
flexbox
est la façon la plus simple que j'ai trouvé de la part des gars de CSS-tricks. C'est vrai collant-pied de page, il fonctionne lorsque le contenu est < 100% de la page et > 100% de la page:Et CSS:
Noter que c'est bootstrap-agnostique, de sorte qu'il fonctionne avec bootstrap et sans elle.
Vous pouvez simplement essayer d'ajouter une classe sur votre pied de page barre de navigation:
Puis créer un CSS nommé personnalisé.css et corps rembourrage comme ça..