28172 sujets

CSS et mise en forme, CSS3

Pb : mettre une div à pleine hauteur d'une autre

Bonjour,

J'ai un problème avec une div que je désire faire entrer à pleine hauteur (sauf une petite marge si possible) d'une autre div, soit 100%, une hauteur qui varie selon la résolution de l'écran. J'ai bien cherché sur le web pour mon problème mais c'est plutôt difficile de trouver une solution exactement pour ce problème.

Donc, la div que j'essaie de mettre dans une autre div, lorsque je mets height:100%, elle s'affiche pleine hauteur de la page, et même plus! Elle déborde donc par-dessus mon footer! Je suis désespéré. Quelqu'un peut m'aider? Il s'agit de la div "textcentre". Voici mon code :

a écrit :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

<html>

<head>

<style>
body {text-align:center; margin: 8 auto; background-image: url("images/fond.gif")}
#overall {margin:auto; width:990px; height:100%; border:5px solid #333399; background-color:#6699CC;}
#boutons {border-top:2px ridge blue; width:990px; position:relative; top:-4px}
#corps {padding-top:20px;}
#textecentre {margin:auto; align:center; width:650px; position:relative; height:100%; padding-left:30px; display:block; padding-right:30px; padding-top:30px; padding-bottom:30px; background-color:#99CCFF;}
#footer {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>

</head>


<body>

<div id="overall">

<img src = images/titre.jpg>

<div id="boutons">
<img src="images/bouton-presentation.jpg" name="pres2"/>
<img src="images/bouton-resume.jpg" name="res2"/>
<img src="images/bouton-essai.jpg" name="essai2"/>
<img src="images/bouton-fondement.jpg" name="fond2"/>
<img src="images/bouton-essence.jpg" name="essence2"/>
<img src="images/bouton-critique.jpg" name="critique2"/>
</div>

<div id="corps">

<p id="textecentre">

Ici c'est la présentation

</p>

</div>

</div>
<div id="footer">
</div>

</body>
</html>



Donc vous pouvez voir que la div bleu pâle est beaucoup trop haute. Help please!!
Modifié par Zno (24 Apr 2009 - 21:10)
Merci, mais j'ai essayé en HTML Strict et ça ne marche pas, ni en XHTML Strict ou Transitional.

Quelqu'un a une meilleure solution?
Bien sûr, mais c'est simplement le même en enlevant "transitional" au début...

La petite ligne "http://www.w3.org/TR/html4/strict.dtd" est-ce qu'elle est nécessaire? sur certains sites, elle est là, sur d'autres non...

Quoi qu'il en soit, j'ai essayé avec cette ligne et sans cette ligne, ça ne fonctionne pas.

Aussi, je parle d'une div depuis le début, mais c'est plutôt un paragraphe... En tout cas, même si je remplace par div, ça ne fonctionne pas. On peut remplacer celui-ci par une vraie div, je m'en fous.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style>
body {text-align:center; margin: 8 auto; background-image: url("images/fond.gif")}
#overall {margin:auto; width:990px; height:100%; border:5px solid #333399; background-color:#6699CC;}
#boutons {border-top:2px ridge blue; width:990px; position:relative; top:-4px}
#corps {padding-top:20px;}
#textecentre {margin:auto; align:center; width:650px; position:relative; height:100%; padding-left:30px; display:block; padding-right:30px; padding-top:30px; padding-bottom:30px; background-color:#99CCFF;}
#footer {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>

</head>


<body>

<div id="overall">

<img src = images/titre.jpg>

<div id="boutons">
<img src="images/bouton-presentation.jpg" name="pres2"/>
<img src="images/bouton-resume.jpg" name="res2"/>
<img src="images/bouton-essai.jpg" name="essai2"/>
<img src="images/bouton-fondement.jpg" name="fond2"/>
<img src="images/bouton-essence.jpg" name="essence2"/>
<img src="images/bouton-critique.jpg" name="critique2"/>
</div>

<div id="corps">

<div id="textecentre">

Ici c'est la présentation

</div>

</div>

</div>
<div id="footer">
</div>

</body>
</html>


Le résultat, quand je la mets en "strict", est que toute ma page ainsi que ma div #textecentre ont maintenant une hauteur fixe, et je me demande bien d'où elles viennent!

P.S. : Il peut sembler y avoir une div inutile dans mon document, mais cette div, #corps, va être nécessaire plus tard parce que je vais faire une commande en java pour changer le innerhtml et c'est le corps au complet qui va changer, parce qu'il va y avoir un menu de plus en cliquant sur d'autres boutons.
Modifié par Zno (24 Apr 2009 - 21:15)
J'oubliais, si tu appliques l'ID à un <p>, ajuste la marge à 0 ou autre selon ton besoin.
Merci, ça a réglé le problème de la div du texte, elle se place maintenant à 100% de la div "corps".

Mais ça a créé un autre problème, fouillez-moi pourquoi... La div "overall" se place maintenant à une très grande taille, qui dépasse de beaucoup la fenêtre, tandis qu'avant elle se plaçait juste à 100% de la fenêtre, avec mon footer plus bas.

Voici mon code :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

<html>

<head>

<style>

html           {height:100%;}
body           {text-align:center; margin: 8 auto; background-image: url("images/fond.gif"); height:100%;}
#overall       {margin:auto; width:990px; position:relative; min-height:100%; border:5px solid #333399; background-color:#6699CC;}
#boutons       {border-top:2px ridge blue; width:990px; position:relative; top:-4px;}
#corps         {padding-top:20px; padding-bottom:20px; min-height:100%;}
#textecentre   {margin:auto; align:center; width:650px; height:100%; padding-left:30px; display:block; padding-right:30px; padding-top:30px; padding-bottom:30px; background-color:#99CCFF;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>

</head>


<body>

<div id="overall">

<img src = images/titre.jpg>

<div id="boutons">
<img src="images/bouton-presentation.jpg" name="pres2"/>
<img src="images/bouton-resume.jpg" name="res2"/>
<img src="images/bouton-essai.jpg" name="essai2"/>
<img src="images/bouton-fondement.jpg" name="fond2"/>
<img src="images/bouton-essence.jpg" name="essence2"/>
<img src="images/bouton-critique.jpg" name="critique2"/>
</div>

<div id="corps">

<div id="textecentre">

Ici c'est la présentation

</div>

</div>

</div>

<div id="footer">
</div>

</body>
</html>


Notez que je l'ai mis en Transitional, parce que c'est absolument nécessaire, sinon la taille est trop petite et fixe. Notez que j'ai beaucoup joué avec les min-height, je les ai essayés à plusieurs endroits, même partout... ça ne semble pas être le problème.

Merci de votre aide.
Note préliminaire : Tout ce qui suit concerne ton avant dernier post (celui avec un doctype correct)
a écrit :
La petite ligne "http://www.w3.org/TR/html4/strict.dtd" est-ce qu'elle est nécessaire? sur certains sites, elle est là, sur d'autres non...
Tu es sûr d'avoir lu l'article que je t'ai conseillé ? Parce que dedans, tu as clairement ta réponse :
a écrit :
Utiliser un DOCTYPE incomplet ou désaprouvé -voire aucun DOCTYPE- déclenche dans ces navigateurs le mode "Quirks" (NdT : "habitudes bizarres") qui va considérer votre balisage comme invalide et démodé, conforme seulement aux normes déprimantes de l'industrie de la fin des années 90.

Dans ce mode, le navigateur va essayer de traiter votre page en mode de rétro-compatibilité, affichant vos CSS comme IE4 aurait pu le faire, et retournant à un DOM propriétaire et spécifique au navigateur (IE retourne au DOM IE; Mozilla et Netscape 6 retournent vers Dieu sait quoi).

De toute évidence, ce n'est pas ce que vous voulez.

a écrit :

Le résultat, quand je la mets en "strict", est que toute ma page ainsi que ma div #textecentre ont maintenant une hauteur fixe, et je me demande bien d'où elles viennent!
1. l'important dans ton cas n'est pas d'être en "strict", c'est d'écrire correctement ton doctype pour ne pas faire passer le navigateur en mode de compatibilité (qui, si tu as bien RE-lu les quelques lignes ci-dessus, est à éviter à tout prix). Strict transitionnel ou frameset ne sont pas des modes de rendu, ce n'est pas le problème ici.
2. Rien n'est en hauteur fixe sur ta page. La hauteur est définie par le contenu ; si tu ajoutes du texte, tu verras tes div s'agrandir.

a écrit :
Quoi qu'il en soit, j'ai essayé avec cette ligne et sans cette ligne, ça ne fonctionne pas.
Comme tu l'auras compris maintenant, la "ligne" en question est un impératif pour avoir un site qui se comporte de manière prévisible. N'espère rien pouvoir contrôler sur ta page sans ça. C'était donc déjà la première étape à effectuer, et maintenant que c'est réglé, ta page est rendue de manière correcte.
Tu souhaites que ta div occupe 100% de la hauteur de son conteneur ? C'est le comportement par défaut (enfin plutôt dans l'autre sens, mais bon, passons), et tu l'as.
Tu souhaites un petit espace au-dessus et au-dessous de ta div ? Tu as déjà demandé l'espace au-dessus (#corps {padding-top:20px}), il ne te manque plus qu'à demander celui du bas..

Dans ton dernier post, tu t'en remets de nouveau au mode compatibilité. C'est ton choix et il est respectable. Par contre, mes compétences s'arrêtent là, car (comme beaucoup, j'ose croire) je n'ai aucune connaissance de ce mode de rendu. Bon courage, ça va pas être facile Smiley langue
Modifié par marcv (25 Apr 2009 - 09:07)
Merci pour les clarifications marcv, je vais m'en tenir au mode strict en n'oubliant pas de mettre la "petite ligne".

Par contre, je commence à me questionner à savoir si ce que je veux est possible, parce que ça ne marche toujours pas.

a écrit :
Tu souhaites que ta div occupe 100% de la hauteur de son conteneur ? C'est le comportement par défaut (enfin plutôt dans l'autre sens, mais bon, passons), et tu l'as.


Pas tout à fait... En fait, j'ai beaucoup joué avec les possibilités de "min-height" et "height", et j'arrive à différents résultats qui présentent différents problèmes.

Je n'ai toujours pas ce que je veux, soit que la div "textecentre" s'affiche à 100% de la hauteur de la div "corps" (sauf une petite marge, ce qui ne cause pas de problème), qui elle-même prend toute la hauteur du navigateur, sauf l'espace pris par les boutons en haut.

Voici une des variations que j'ai essayées et qui fait en sorte que la div "overall" soit bien à 100% du navigateur, mais pas la div #corps (qui dépasse largement (j'ai mis de la couleur pour le voir)), ni la div #textecentre (qui prend toute la hauteur de #corps).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	 "http://www.w3.org/TR/html4/strict.dtd">


<html>

<head>

<style>

html           {height:100%;}
body           {text-align:center; margin: 8 auto; background-image: url("images/fond.gif"); height:100%;}
#overall       {margin:auto; width:990px; position:relative; height:100%; border:5px solid #333399; background-color:#6699CC;}
#boutons       {border-top:2px ridge blue; width:990px; position:relative; top:-4px;}
#corps         {padding-top:20px; padding-bottom:20px; height:100%;}
#textecentre   {margin:auto; align:center; width:650px; height:100%; padding-left:30px; display:block; padding-right:30px; padding-top:30px; padding-bottom:30px; background-color:#99CCFF;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>

</head>


<body>

<div id="overall">

<img src = images/titre.jpg>

<div id="boutons">
<img src="images/bouton-presentation.jpg" name="pres2"/>
<img src="images/bouton-resume.jpg" name="res2"/>
<img src="images/bouton-essai.jpg" name="essai2"/>
<img src="images/bouton-fondement.jpg" name="fond2"/>
<img src="images/bouton-essence.jpg" name="essence2"/>
<img src="images/bouton-critique.jpg" name="critique2"/>
</div>

<div id="corps">

<div id="textecentre">

Ici c'est la présentation

</div>

</div>

</div>

<div id="footer">
</div>

</body>
</html>


Le problème devient donc différent de mon dernier post, où les div #corps et #textecentre avaient la bonne hauteur, mais toute la page n'était pas à 100% du navigateur.

Bref, j'ai essayé plein de manières qui donnent plein de problèmes différents.
a écrit :
Je n'ai toujours pas ce que je veux, soit que la div "textecentre" s'affiche à 100% de la hauteur de la div "corps" (sauf une petite marge, ce qui ne cause pas de problème), qui elle-même prend toute la hauteur du navigateur, sauf l'espace pris par les boutons en haut.
Voici un code CSS qui, je crois, fait exactement ce que tu demandes (je soupçonne cependant ce que tu demandes de ne pas être exactement ce que tu veux, mais bon, tu nous diras Smiley langue ) :
/*
 * Si tu veux que div#corps et div#boutons prennent
 * à elles deux toute la hauteur du viewport (le "navigateur"),
 * il n'y a plus de place pour ton image titre.jpg et pour
 * ta div#footer, qu'il nous faut donc masquer
 */
#overall img, #footer {display:none;}
#overall * img {display:inline;}

/*
 * on met #overall à 100% de la hauteur du viewport
 */
html, body {
height:100%;
margin:0;
padding:0;
}
#overall {
height:100%;
width:990px;
margin:0 auto;
}

/*
 * on y place #boutons et #corps
 */
#boutons {
height:10%;
}
#corps {
position:relative; /*explication au point suivant*/
height:90%;
}

/*
 * je simule la marge au-dessus de #textecentre avec
 * un positionnement absolu. Il y a plein d'autres
 * moyens d'y arriver, mais sans connaître vraiment
 * le contenu de tes div, c'est ce que j'ai trouvé de plus "sûr".
 */
#textecentre {
position:absolute;
top:10%;
width:100%;
height:90%;
}
Désolé pour le délai, c'est que j'étais un peu découragé, parce que ça ne marche pas encore, malgré ton aide généreuse marcv. En effet, j'ai fait exactement le code que tu m'as donné et la div #textecentre dépasse de beaucoup le footer et va jusqu'en bas, encore. Par contre, je comprends ce que tu voulais faire.

Par contre, je ne peux pas mettre la div #textecentre en position absolute parce que si je fais ça, la div n'est plus centrée comme je le voudrais. De plus, ça ne semble pas régler le problème.

Je réussis à cacher le footer depuis le début, mais pour le titre, tu as raison, je ne veux pas vraiment le cacher. Alors tout est vrai dans ce que je disais sauf pour le titre.


Voici mon nouveau code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	  "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style>

html           {height:100%;}
body           {text-align:center; margin: 0; padding:0; background-image: url("images/fond.gif"); height:100%;}
#overall       {margin:0 auto; width:990px; position:relative; height:100%; border:5px solid #333399; background-color:#6699CC;}
#boutons       {border-top:2px ridge blue; width:990px; height:10%; position:relative; top:-4px;}
#corps         {position:relative padding-top:20px; padding-bottom:20px; height:90%;}
#textecentre   {top:10%; margin:auto; align:center; width:650px; height:90%; position:relative; padding-left:30px; padding-right:30px; padding-top:30px; padding-bottom:30px; background-color:#99CCFF;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>

</head>


<body>

<div id="overall">

<img src = images/titre.jpg>

<div id="overall">


<img src = images/titre.jpg>

<div id="boutons">
<img src="images/bouton-presentation.jpg" name="pres2"/>
<img src="images/bouton-resume.jpg" name="res2"/>
<img src="images/bouton-essai.jpg" name="essai2"/>
<img src="images/bouton-fondement.jpg" name="fond2"/>
<img src="images/bouton-essence.jpg" name="essence2"/>
<img src="images/bouton-critique.jpg" name="critique2"/>
</div>

<div id="corps">

<div id="textecentre">

Ici c'est la présentation

</div>

</div>

</div>

<div id="footer">
</div>

</body>
</html>


Note intéressante : Le 90% dans la div #corps, si je le mets à 50%, ça semble faire avancer les choses. Mais ça ne fait pas du tout la même chose : lorsque je fais ça, la div #corps ne va plus jusqu'en bas du viewport mais s'ajuste en proportion de celui-ci. Par contre, il elle prend qu'une partie de la hauteur de #corps et lorsqu'on rapetisse le viewport, elle dépasse sur le footer! On voit donc que ce 50% n'est pas vraiment 50% de #corps, mais plutôt 50% de tout le viewport, ou quelque chose du genre.

Merci pour votre aide.
Zno, peux-tu réaliser une maquette de ce à quoi tu souhaites arriver stp et la poster ici.
Bonjour,

Soyons logiques deux secondes, voulez-vous?
Zno a écrit :
Le 90% dans la div #corps, si je le mets à 50%, ça semble faire avancer les choses.

Ça change des choses, effectivement.

Zno a écrit :
Mais ça ne fait pas du tout la même chose

La même chose que QUOI?
(Ça me rappelle ma citation en signature: «Quelle est la différence entre un pigeon?» Hum?)

Zno a écrit :
lorsque je fais ça, la div #corps ne va plus jusqu'en bas du viewport mais s'ajuste en proportion de celui-ci

Non, pas tout à fait. Elle s'ajuste en proportion de la hauteur définie pour son parent (pour peu que le parent ait une hauteur définie). Ici le parent est BODY, qui a une hauteur définie à 100%, soit 100% de la hauteur de son parent (pour peu que celui-ci ait une hauteur définie, rebelote). Le parent de BODY est HTML, qui a une hauteur définie à 100%... du viewport (HTML n'ayant pas de parent).

La hauteur de div#overall n'est donc pas directement liée à la hauteur du viewport. Elle y est liée indirectement via le jeu des height:100%.

Maintenant, qu'est-ce que ce height:90%? Eh bien c'est une hauteur figée, qui va être appliquée quelle que soit la quantité de contenu dans ce conteneur. Si le contenu est trop important, il dépassera allègrement. Ce qui est normal, vu que c'est ce que l'on demande quand on utilise la propriété height. Pour un comportement différent, voir du côté de min-height (on gardera les height:100% sur HTML et BODY, par contre).

Zno a écrit :
il prend qu'une partie de la hauteur de #corps et lorsqu'on rapetisse le viewport, elle dépasse sur le footer!

En réalité il (div#overall) se fiche royalement de la hauteur de #corps, vu qu'on a figé sa hauteur.

Zno a écrit :
On voit donc que ce 50% n'est pas vraiment 50% de #corps

La propriété height, exprimée en pourcentages, n'a jamais représenté un pourcentage de la hauteur du contenu.

Pour finir, je souscris à la demande de marcv. Comme lui, je soupçonne que ce que tu as demandé dans ce sujet correspond à un mauvais choix d'intégration, qui ne permet pas de réaliser efficacement le design souhaité.

En gros, tu as un design, tu as eu une idée pour l'intégrer, et tu demandes le code pour y arriver (ou des corrections sur le code que tu as utilisé). Sauf que si ton idée d'intégration est mauvaise, eh bien tout le monde s'est pris la tête pour rien. Smiley cligne
Modifié par Florent V. (06 May 2009 - 09:51)
Sujet clos
Aller à