[Saelian]

Salut le labo,

Ca fait deux heures que je galère sur un problème de CSS qui est probablement basique, mais les réponses Google me font un peu "peur".

Je voudrais tout simplement qu'un élément ait 100% de la hauteur de son parent, et apparemment, c'est plus compliqué que ce qu'il n'y parait ...
Le code :

http://jsfiddle.net/6wgh6/

En faisant ca, la hauteur de ma <div> page_generale fait 100% de la hauteur de ma fenêtre, mais je voudrais qu'elle fasse 100% de la hauteur du parent ( la balise body dans ce cas la ). Ca fait pareil si j'imbrique des <div>.

D'ailleurs on constate en bas de page que la balise body passe au dessus de la balise html, et ne s'imbrique pas non plus ...

A priori ya aucun moyen simple de résoudre ce genre de problème autrement qu'avec du javascript ? ( j'en suis qu'a html / css, donc le javascript je reviens dans un an )
J'ai l'impression que quand on lui dit height 100% il prend la taille de ma fenetre et applique la taille retenue...

Merci par avance.

[Shymeru]

De ce que je lis de ton code : tu donnes à l'élément html une height de 100%.
Donc il occupe toute ta page. Les éléments fils ne font donc que remplir l'espace à leur disposition, soit pour body 100% de html et ta pour div 100% de body.
Bref, le comportement attendu.
Et c'est le padding qui doit te créer ce décalage.

[SamousaFR]

100% c'est par rapport au parent, mais le parent doit avoir une taille fixé.
C'est pour faire quoi ?

[Saelian]

C'est pour de l'apprentissage SamousaFR

Ok grâce à vos commentaires, si je fixe la hauteur de mon bloc central, ça donne à peu prés ce que je voulais.

J'ai mis à jour le code.

http://jsfiddle.net/6wgh6/7/

Pourquoi mon bloc bleu ne prend pas toute la hauteur du bloc marron ?

edit pour en dessous :
le marron c'est "cadre_principal", il fait bien 700 de haut, pas de pb la dessus.
le cyan c'est "milieu" et je voudrais qu'il soit aussi haut que le marron ( mais en dynamique, je veux pas qu'il soit figé quand j'aurai trop d'articles qui augmenteront la hauteur du marron )

re-edit :
ok je me pose des faux problèmes en fait. si je fige le cyan à 680px, il s'agrandit automatiquement quand je rajoute des articles ... dsl pour les questions débiles

[Shymeru]

Citation :

Publié par Saelian

Pourquoi mon bloc bleu ne prend pas toute la hauteur du bloc marron ?

Ok, en fait, pour commencer ton body n'a pas de taille définie. Donc les éléments qui ont une hauteur en pourcentage à l'intérieur de celui-ci ne peuvent pas l'appliquer.
Il faut que tu définisses une taille à l'élément qui contient tous les autres. Les hauteurs définies en pourcentage sont relatives, c'est à dire qu'elles prennent leur valeur par rapport à leur élément parent.
Et comme tu n'as pas cette taille définie et que tu mélanges des hauteurs en pixel et en pourcentage, tu obtiens un comportement difficile à prévoir.

Si tu veux partir sur des bases saines : commence par définir la taille des éléments html et body comme cela

Code:

html, body {
   height: 100%;
   width: 100%;
}

Ensuite, attention avec la façon dont tu exprimes la taille de tes éléments. Surtout si tu mélanges pixels et pourcentages.
Sois cohérent. Pour un même niveau d'éléments, utilises toujours pixel ou toujours pourcentage, ne mélanges pas, sinon c'est très difficile de prévoir l'évolution des choses.
Quand tu attribues à une div une taille de 10px et puis à une autre div (élément frère, donc un élément qui se situe au même niveau dans le DOM) une taille de 100%, tu vas te retrouver avec une div qui dépasse de son élément parent.
Pareil, attention au padding et margin, tu as vite fait de tout faire sortir de son cadre.

Rappel toi d'une chose, la taille d'un élément exprimée en pourcentage dépend directement de la taille de la résolution de l'écran de l'utilisateur. Cette taille varie, ce qui n'est pas le cas d'une taille fixée en pixel qui elle aura toujours la même valeur.

[N3o-]

Tu t'inities au responsive ? Parce que si ce n'est pas le cas, c'est beaucoup plus safe de fixer des dimensions fixes au body. Tu pars sur une base connue plutôt que sur des dimensions random qui dépendront de la résolution.