Forum : Question à propos des hauteurs sur l'intégration des maquettes

Bonjour,

lorsqu'on a une maquette à intégrer et que sur cette page il y a 3 parties:

-un bandeau en haut

-un milieu de page

-un pieds de page

Je signale que sur la maquette le pieds de page est bien en bas de la page, il n'y a rien en dessous.

Je travaille sur ordi portable et je me pose la question:

si je commence mon intégration en mesurant la height de ces 3 parties avec l outil règle de photoshop et que je reporte dans mon css cette height en pixels pour chacun des éléments et que je teste mon site sur mon ordi portable et que le pieds de page se trouve bien en bas de la page dans mon navigateur lors du test en local, et bien lorsque je vais changer de média et que je vais tester mon site sur large desktop et bien il y a des chances que mon pieds de page ne soit pas en bas de l'écran il sera plus haut et ça car l'écran des large desktops est plus grand et que j'ai codé la height de mes trois parties en pixels

Donc comment faire pour intégrer cette page et que le pieds de page soit bien en bas de la page lors du test sur tous les supports?

Plus génaralement lorsqu'on a une maquette à intégrer avec un footer en bas de page quel est la démarche d'intégration et le raisonnement à avoir pour que le footer soit en bas de page sur tous les supports?

PS: la solution n'est je pense pas de coder la height des éléments en pourcentage car c'est déconseillé

Merci

4 réponses

Grafikart

Je te conseille de regarder cette page : http://ryanfait.com/sticky-footer/
Tu peux aussi chercher "sticky footer" sur google pour voir les solutions proposées. Ce n'est pas vraiment "simple" pour ça que je ne te copie pas directement le code ^^

abc.xyz

Auteur

Grakikart, merci de ta réponse, simplement ta réponse renvoie le problème que je pose sur l'élément au dessus du footer maintenant (le milieu de page), en effet ma question n'est pas relative uniquement au footer mais à la méthode at au raisonnement que l'on doit avoir lorsqu'on integre une maquette pour que la page entière soit remplie de haut en bas sur tous les supports par les differentes parties de cette page.
Quelle est cette méthode?
car si on indique les éléments css de hauteur (height,margin-top,margin-bottom,padding-top,padding-bottom) en pixels je pense que l'espace de la page en hauteur ne sera pas comblé sur tous les supports...

Grafikart

On n'indique pas les hauteur du contenu, on le laisse s'agrandir en fonction de son contenu

François Cammas

Bonjour, quand tu travailles sur une maquette, il faut penser intégration par rapport au contenu. En général, le header et le footer sont identiques sur toutes les pages, tu peux donc te permettre de tout positionner en pixel. Pour les parties dynamiques, personnellement je travaille avec les min-height pour gérer un minimum d'espace entre le header et le footer.
Je ne sais pas si j'ai pu en partie répondre a ta question.