Collant Pied de page de Site Responsive

Je suis en train de créer un collant pied de page pour un site web réactif. J'ai chercher sur internet et nous avons trouvé plusieurs solutions, mais mon problème est que, en raison de la quantité de texte dans mon pied de page, la hauteur du pied de page sont les changements word-wrap se produit. J'ai essayé d'utiliser la méthode sur Ryan Fait du site ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ), mais puisque vous ne pouvez pas compte de la hauteur du pied de page étant une valeur statique, il est difficile de définir la poussée de la valeur pour le CSS. Actuellement j'ai juste le pied de page fixe vers le bas, mais qui est à l'origine d'un problème, parce que le pied de page augmente la hauteur, c'est prendre un espace précieux sur les petites fenêtres. Voici un exemple de la façon dont beaucoup de l'info, c'est dans mon pied de page en-dessous. Des suggestions?

<footer>
<div id="upperFooter">
<p>2000 - 2012 College Name | Copyright | Internet Privacy Policy | Disclaimer |      Collection and Use of Social Security Numbers</p>
</div>
<!-- end upperFooter -->
<div id="lowerFooter">
<p>College Name is a member of the Stated State College System.   College Name is not affiliated with any other public or private university or College in State or elsewhere. </p>
<p>College Name is a division of College Name and is accredited by the Commission on Colleges of the Association of Colleges (“XIXI”) to award the baccalaureate and associate degree. Contact the Commission on Colleges at for questions about the accreditation of College Name.</p>
</div>
<!-- end lowerFooter --> 
</footer>

Peut-être gratter inutile de contenu à l'aide de requêtes de média. Lors de l'affichage de contenu sur les appareils mobiles que vous devriez vraiment avoir le contenu le plus pertinent affiche. Une autre option serait de pile de navigation pour mobile. Modifier la mise en page à l'aide de requêtes de média.
Kris l'idée est bonne, aussi loin que de faire le pied de page prennent moins d'espace est concerné. Lorsque le texte est déjà assez petit, et si vous voulez qu'il soit utilisable (qui, évidemment, vous le faites, si vous vous donnez la peine de le rendre sensible), puis en prenant des éléments semble être la voie à suivre. Une autre idée serait de masquer le pied de page (set bottom: -150px; ou quoi que ce soit) et de permettre à l'utilisateur de taper une fois sur pour afficher les informations de copyright.
Voir cet exemple. Utilisation de @media queries pour fixer le pied de la hauteur pour chaque résolution d'écran que vous aimez, etc.

InformationsquelleAutor Jason Tremain | 2012-07-31

1

Essayer de donner le pied de page de positionnement absolu
```
footer {
position: absolute;
bottom: 0;
}
```
- Je pense que j'ai essayé d'abord. La façon dont la page est construite est qu'il y a un en-tête div div conteneur, puis un pied de page div. Quand j'style le pied de page à la position "absolute", il provoque le pied de page pour faire défiler la page, qui, bien sûr, je ne veux pas arriver.
- Si le conteneur div a certains blocs flottait gauche/droite, comme par exemple la barre latérale peut alors être mise en œuvre overflow: auto; pour le conteneur va résoudre n'importe quel problème de positionnement avec le pied de page. Mais il est très difficile de savoir ce qui est à l'origine du problème sans avoir à regarder l'ensemble de l'html et le css, si possible, veuillez fournir les codes.
InformationsquelleAutor Raj
1

J'ai eu un bon succès avec Ryan Fait du code dans le passé, mais comme vous le mentionnez, il ne fonctionne pas bien pour la variable de la hauteur des pieds de page.

La meilleure solution que j'ai trouvé lorsque le pied de page n'est pas une hauteur fixe est ce Flexbox solution

Flexbox est génial et avant-gardiste, donc personnellement ça ne me dérange pas si vous n'avez pas un support complet pour certains navigateurs plus anciens.

Exemple de travail basé sur le code ci-dessous. J'ai utilisé certains fournisseurs préfixes de manière plus large prise en charge du navigateur mais le code pas très propre,

HTML
```
<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body> 
```
CSS
```
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
```
InformationsquelleAutor David Taiaroa
0

Vous voudrez peut-être consulter ce blog: http://timothy-long.com/responsive-sticky-footer/

Il utilise le display: table hack pour le faire, mais la page de démonstration fonctionne bien.

Votre autre option est d'utiliser les media queries pour adapter le pied de la hauteur de l'évolution.
- Mais comme je vois que collant, pied de page ne correspond pas à fond dans la dernière version de Chrome... Aussi, si vous commencez à jouer avec le css, il fait d'étranges comportements, comme l'en-tête ou le contenu des sauts vers le bas.
- La meilleure solution pour une variable de pied de hauteur est des requêtes de média en fonction de la largeur à des points d'arrêt où la hauteur des changements. Vous avez juste besoin d'être contenu statique à les écrire correctement. Les suggestions ci-dessus ont été le plus proche de ce que fit ce que l'OP a été à la recherche pour.
InformationsquelleAutor jlovison
0

Vous pouvez essayer ceci: Moderne, Propre CSS “Sticky Footer”. Peut-être que ça va aider.

Utiliser un pied de page avec: position:absolute; et de lui donner une hauteur, puis donner margin-bottom: (footer height); à votre enveloppe.
- Pourriez-vous résumer les principales conclusions de la liaison, de sorte que la réponse sera là en cas que le poste devrait disparaître? Merci.
InformationsquelleAutor Anca Breje
-3

Ce sujet
footer { position: fixed; bottom: 0; }
- Les OP membres, elles sont actuellement à l'aide du pied de page fixe vers le bas.
InformationsquelleAutor CharlieLukeUK

Vous devez vous connecter pour publier un commentaire.