Problème de Hauteur.

Bonjour,

Je n'arrive pas à enlevé l'espace entre mes Div en pied de page.

Et j'ai l'impression que mon 100% sur la hauteur de mes div ne fonctionne pas correctement car j'ai là aussi un décalage qui est gênant car il n'y à pas de contenu pour affiché l’ascenseur.

Je ne vois plus ou je doit chercher mon erreur.

Je vous laisse le lien vers la page pour que vous puissiez vous faire une idée de mon problème.
http://www.alidufresne.fr/prive/golf-test/

Merci A+
Modifié par ali13 (23 Apr 2012 - 16:26)

Salut, pour le footer qui n'est pas collé au reste, enlève ton span.clear et ajoute la classe clear à ton footer.

le 100% de hauteur sur tes div fonctionne comme il doit fonctionner, mais tu ne dois pas savoir comment il doit fonctionner...

En gros (sans grosse certitude non plus, je laisse les autres s'en charger...) tes deux divs centrales ont une height de 100% correspondant à une height égale à 100% de la height de leur parent.
Leur parent a une height de 100% correspondant à une height égale à 100% de la height de son parent (body).
Ce dernier a également une height de 100% (taille de l'écran, c'est là que je ne suis pas sûr).

Donc si ton écran (enfin, d'ailleurs c'est plutôt la taille de la zone d'affichage) fait 460px (si ta fenêtre est petite...), ton body aura une height de 460px, donc ta div aura une height de 460px, donc tes divs centrales auront une height de 460px.

Jusque là, ça rentre dans l'écran. Mais, Tu as un header (par exemple 40px), donc on atteint une taille de 500px. Et un footer (par exemple... 40px =°) donc on atteint 540px... 540 > 460 donc il sort de l'écran =° (donc ascenseur...)

Tu peux essayer de voir ça pour garder le pied de page en bas...
http://www.snoupix.com/coller-le-pied-de-page-en-bas_tutorial_9.html

Merci gothor.
Pour le footer se cale bien aux autres div. c'est ce que je voulais.

Pour les 100% de hauteur Ton explication ma permis effectivement de mieux comprendre le fonctionnement.

J'aimerais savoir si il est possible de soustraire les valeurs fixe du Footer et Header de mes 100%
Soit en CSS soit en petit scripte (mais tout petit).

Merci A+

C'est possible en CSS3 de faire des opérations avec la fonction calc(), mais ce n'est pas très recommandé.

Peut-voir en regardant du côté de Less (que je ne connais pas) il y aurait moyen, mais je doute fortement (il me semble qu'il s'agit juste d'un langage permettant de générer un css).

Sinon, c'est en effet faisable en JavaScript d'enlever les hauteurs du footer et du header.

Mais je pense que le plus simple reste de faire ta mise en page en CSS... Je suis sûr que ce que tu souhaites faire est réalisable

Je reviens à la charge. Voilà ce que j'obtiens c'est mieux bien que je ne sois pas sûr que ce soit la bonne méthode.

Ce que j'aimerais c'est que le menu s'étende vers le bas comme son parent.(Je pense que je peux gérer cela avec une image de fond dans le parent justement)

Ensuite j'aimerais que le contenu pousse le pied de page et la colonne orange. Ce n'est pas le cas lorsque j'ajoute du contenu. Le pied de page reste figé.

Le menu fait apparaitre une DIV qui pousse le contenu vers la droite et non sur le contenu.

La page en ligne.

Bonjour,
Avec quelque chose comme ça, ça peut peut-être le faire:
http://jsfiddle.net/Gothor/6PQVv/
Mais il faudrait donc en effet remplacer

#global {
    background-color : yellow;
}

Par l'image qui doit apparaître derrière le menu et user de CSS3 et ses background-multiples pour également mettre le background de #content dans #global (car retire du contenu et tu verras que #content s'arrête avant le footer s'il n'y a pas assez de contenu...)

Bon pour le menu c'est réglé. Merci Gothor.

Par contre je ne vois pas comment faire pour empêcher que le contenu sorte de sa div.
Et faire en sorte que le pied de page soit pousser vers le bas.

A+