Pour qu'un bloc prenne toujours toute la hauteur de l'écran

Bonjour,
Pour le pied en bas tu peux par exemple utiliser le fameux Sticky footer Sticky footer.

Pour les blocks qui prennent toute la hauteur: des colonnes factices (voir tuto Alsacréation) ou javascript.
Modifié par loicbcn (02 Oct 2010 - 19:50)

loicbcn a écrit :
Bonjour,
En ce qui concerne les colonnes factices, je pense que tu peux les utiliser avec un design fluide, en utilisant une image très longue de 1px de hauteur (elle ne pèsera donc pas très lourd) avec une séparation de couleur et en précisant le "background-position" en pourcentage.

Je viens de voir ta page, peut-être aurais-tu intérêt mettre tout tes divs en position absolute étant donné que tu connais leurs largeurs ... en l'occurrence ton design n'est pas vraiment fluide vu que tes colonnes ont une largeur en pixels.

Je crois savoir à quoi tu fais allusion et j'aurais du préciser que l'image de fond n'est malheureusement pas unie mais c'est censé être une photo. J'ai mis le site à jour avec l'image de fond pour mieux s'en rendre compte.
Il y aura une image de fond par bloc (colonne).

Tu as raison pour la largeur, elle n'est pas fluide en effet
Mais si je mets les divs en position:absolute, je perds l'effet de "glisse" lorsque j'utilise le menu. A moins qu'on ne parle pas de la même chose...

Bonjour GC-Nomade

Merci pour les infos du footer, ça me fait deux pistes à explorer !

gc-nomade a écrit :
ton conteneur principal a un fond transparent , il est normal que la partie basse reste blanche. attribut lui une couleur ou une image de fond .

Le fond est fait avec une image et non d'une couleur de fond. Cette image est plus grande que ce que le bloc ne laisse voir, ceci pour qu'elle prenne la hauteur de l'écran, quelque soit sa taille et sa résolution. Enfin, quand le bloc prendra toute la hauteur, pour l'instant ce n'est pas le cas.
Si qqn a une idée, elle est la bienvenue !

Pour le JQuery, en fait j'utilise déjà un script pour créer l'effet de glissement horizontal. ça marche plutôt pas mal non ?
Ce qui bloque c'est que les DIVS ne prennent pas toute la hauteur de l'écran.
Modifié par miltonis (05 Oct 2010 - 09:59)

Bonsoir,

En fait je ne comprends pas GC, tu me proposes de tout recommencer à zéro c'est ça ?
Si c'est ça, je te remercie pour le temps passé à me répondre mais je n'ai pas très envie de tout recommencer d'autant plus que je suis très, très mal calé en Javascript.

Mis à part ce problème de hauteur de DIV, la structure fonctionne plutôt bien je trouve.
J'aimerais continuer sur cette voie-là tout en (re)touchant aux CSS pour la hauteur des blocs. Pour rappel, j'ai utilisé ce tuto, je pense qu'il faut l'adapter à ma structure (certes inhabituelle) ou alors que j'ai du faire une erreur de CSS quelque part mais je ne vois pas quoi, ni comment la corriger

Pour le footer en revanche, je suivrai tes indications !

bonsoir,

non non , je ne te dis pas de tout recommencer


Pour positionner ton footer en bas de page comme tu le veut , passe ton min-height:100%; en height:100% pour le conteneur global .
Les enfant direct du conteneur global pourront alors interprete ton min-height:100%; a la hauteur de l'ecran (initialment heriter de html -> body -> #conteneur ) .box pourra alors herité de la valeur de la hauteur de l'ecran en l'appliquant avec height ou min-height .
- si min-height:100%; dans #conteneur alors height: xx%; ne veut rien dire : xx est null , impossible d'herité d'une valeur via min/max height/width d'un parent ..

Dans ta feuille de style tu impose une largeur arbitraire a #conteneur et .box ... un coup c'est plus petit que la largeur de l'ecran , un autre c'est plus grand .
Comment gere tu les contenus des .box qui necessite un scroll vertical ? ...
ce n'est pas a #content qui va afficher le scroll a 8000px du bord de la page de gérer les debordement dun .box a mis parcours de cette valeur .
C'est a ton .box (en height:100%;) de gerer son propre contenu .. et au moins de l'afficher a l'ecran (sa scrollbar).

Ton idée de scroll horizontal , c'est un peu d'avoir , plusieurs fenêtre integrer dans une seule page qui glisse les unes a coté des autres .... et .... qui cote a cote se comporteraient comme une simple page ... (barre de scroll si le contenu depasse ) .

Pour addapter tes .box a la taille de la fenêtre , il n'y a que javascript qui va pouvoir le faire .

Via css width #conteneur serait : (width:100%;) x (nombre de boite .box) . CSS ne peut pas gerer ça et deviner la largeur de l'ecran pour dimensionner aussi les .box en largeur .
javascript oui , autant lui refourguer le bébé .

Du coup , les valeurs width dans ta feuille de style n'ont pas lien d'être . et sans js , ton site aura un scroll vertical classique et fonctionnel.

Pour forcer le scroll vertical de tes .box , il te faut un height:100%; herité depuis html et body .
ce height:100% (a #conteneur et .box ) peut aussi etre injecté via js et ne pas apparaitre dans la feuille de style de base -> leur utilité ne vaut que si ton script js est actif , autant aussi lui relégué ceci .

Plus simple qu'il n'y parait en fait :

1) activé les styles height/width utile au javascript via js

2) s'assurer que les valeurs height sont bien transmise d'element en element (height du premier element au dernier ciblé )

3) laisser js calculer les width de #conteneur et .box selon la taille de la fenêtre du visiteur

Ceci est mon point de vue , mais ça permet de separé chaque couche les unes des autres : html -> css -> js .

Cordialement

GC
Modifié par gc-nomade (06 Oct 2010 - 20:54)