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)

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)

miltonis a écrit :
Bonjour GC-Nomade

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


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.

bonsoir,

a propos de gérer ça via js , désolé je me suis mal exprimé .
Ce que je voulais dire , c'est que tu pouvais en premier lieu , monté ta page en verticale via css . (ou cas pas de js )

Ensuite a charge de java-script de compté les divs a aligner cote à cote , leur attribuer la largeur de l'écran (pense au cas ou le scroll vertical sera nécessaire ) ,et a attribué la largeur requise au conteneur principal.

Bien sur , a un moment donné , il est plus facile de faire le css pour le scroll horizontal pour vérifier qu'il passe bien partout .

as tu tester les règles css que je te proposez (en enlevant aussi le position relative a .box pour que le pied prenne #conteneur comme référence .)

En fait les valeurs dynamique que tu as besoin d'aller pioché sont la largeur de l'ecran et le nombre de div a aligner pour reinjecter ces valeurs dans les styles .
la hauteur se règle avec height:100%; de html vers l'élément que tu veut (à transmettre d'élément en élément enfant , héritage css oblige )

Ensuite , vérifie aussi que la navigation dans ta page se passe bien (au clavier par exemple)

amicalement

GC

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)