Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Hauteur d'une div

Dernière réponse le 25 sep 2008 à 22:05:45 marsouin, le 24 sep 2008 à 18:50:04

Signaler ce message aux modérateurs

Bonjour à tous,

j'ai créé une div avec une couleur de fond. Je lui donne l'attribut visible. Lorsque je remplis ma div de texte, le texte est bien visible si je dépasse la taille de la div, mais la couleur de fond ne s'agrandit pas. Auriez-vous une solution ? Je suppose que ce n'est pas grand chose, mais je n'arrive pas à trouver.

Merci d'avance.

mon code :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">

</style>
</head>

<body>
<div id="apDiv1">ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte </div>
</body>
</html>

Configuration: Mac OS X
Safari 525.20.1

Meilleures réponses pour « hauteur d'une div » dans :

Hauteur <div> variables Voir

[CSS] Ajuster hauteur div Voir

[XHTML/CSS] Hauteur des balises <div> Voir

Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...

Contrôleur hôte USB à haut/bas débit VoirLors de la connexion d'un périphérique USB 2.0, Windows affiche le message suivant : Installez un controleur hôte usb à haut débit ou bien Ce périphérique fonctionnera à vitesse réduite si vous n'avez pas de contrôleur haut débit installé sur votre...

Javascript - Connaître la hauteur d'un élément HTML VoirSi vous souhaitez connaître la hauteur (height) d'un bloc HTML en javascript, il existe deux façons selon les navigateurs : element.offsetHeight element.style.pixelHeight Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML...

Hauteur de boite div variable CSS Voir

Forcer tableau ou div à faire 100% de hauteur Voir

Inserer une bannière en haut de page myspace, (Résolu) Voir

Télécharger Vidéo Créateur Haute Définition Voir

Ah oui, j'ai oublié de te dire : après tes deux div en flottant, il Lire la suite

Posez votre question Répondre

Fenrir, le 24 sep 2008 à 19:08:01

Bonsoir Marsoin !

J'ai vu que tu avais mis une hauteur fixe sur ton div, et un overflow:visible, ce qui fait que le contenu peut sortir du contenant (le texte sort de ton div), sans agrandir ton div, qui a une hauteur fixe. Donc la couleur de fond ne suit pas le texte forcément ! :) Ce que tu peux faire, c'est mettre :

#apDiv1 {
position:absolute;
left:283px;
top:56px;
width:277px;
min-height:74px;
z-index:1;
background-color: #993399;
}

la propriété min-height, comme son nom l'indique, est une hauteur minimale pour ton div, mais peut être agrandie par ton contenu. Ainsi, pas de soucis, ton div fera au minimum 74 pixels de haut, mais pourra s'agrandir. Cette propriété min-height ne marche pas sous Internet Explorer 6 et inférieur, ces navigateurs n'étant pas aux normes du Web... Du coup ton overflow est inutile... Pour ces navigateurs vieillissants, si tu tiens vraiment à les prendre en charge, je te recommande l'utilisation de JavaScript. Voici un lien : http://forum.alsacreations.com/...

Ca devrail aller normalement :)

Répondre à Fenrir

marsouin, le 24 sep 2008 à 19:23:53

Ok merci. Effectivement c'est impeccable. Une autre question : il se trouve que mon div est imbriqué dans un autre div. Y a-t-il un moyen pour que le contenant s'agrandisse lui aussi ?

Répondre à marsouin

marsouin, le 24 sep 2008 à 19:27:42

Voici mon code :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">

</style>
</head>

<body>

<div id="contenant">
<div id="apDiv1">ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte </div>
</div>
</body>
</html>

Répondre à marsouin

Fenrir, le 24 sep 2008 à 20:06:48

Autant pour moi, j'ai remis un overflow:visible, à retirer... ;)

Répondre à Fenrir

Fenrir, le 24 sep 2008 à 19:59:27

De rien ! :)

Alors pour répondre à ta question, peut être n'as-tu pas mis tout ton code source, mais il manque la balise <html> au début de ton code...

En fait, le problème majeur vient du fait que tu emploies le positionnement absolu partout : le positionnement absolu, contrairement en positionnement en relatif, rend chaque élément indépendant les uns par rapport aux autres : ainsi, la hauteur de ton contenu ne peut pas modifier la hauteur de ton contenant.

Je te recommandes de mettre :

<style type="text/css">

</style>

Explication :
- ton apDiv1 agira sur les dimensions de ton conteneur, car il est maintenant positionné en relatif. Il comporte une marge de 5 pixels en haut, ce qui équivaut au top:5px;.
- ton conteneur a maintenant une hauteur minimale, comme ton <div> à l'intérieur, et s'agrandira proportionnellement à ton contenu.

En fait, pourquoi as-tu mis des z-index ? le div à l'intérieur de l'autre sera forcément au-dessus dans ce cas...

Dis-moi si ça fonctionne, mais le problème pour moi vient à coup sûr du positionnement en absolu (par défaut, il est plus pratique de positionner en relatif), et d'une hauteur fixe dans ton conteneur, à la place d'un min-height...

;)

Répondre à Fenrir

marsouin, le 24 sep 2008 à 20:36:10

D'accord... merci beaucoup.
Ca fonctionne très bien, mais j'ai encore un nouveau petit soucis : si je mets au calque apdiv1 un top: 10px par exemple, le apdiv1 dépasse de 10 pixels en bas du contenant. Une solution ?

Merci pour ces réponses rapides, très bien expliquées en plus... ne connaissant pas l'attribut min-height, je n'aurais jamais trouvé seul !

PS : effectivement, les z-index n'ont aucune utilité. C'est juste une erreur de manip' en écrivant cet exemple.

Répondre à marsouin

Fenrir, le 24 sep 2008 à 20:54:20

Oui, je te conseilles d'utiliser des margin plutôt que des top ou left, lorsque tu es en position relative. les top, left, right et bottom sont plus utilisés en position absolue...

En fait, le top que tu mets, fait ressortir ton bloc, le décale, alors qu'une marge ne va pas faire dépasser ton contenu en bas du contenant.

Pour avoir l'équivalent de ton top:10px sans les inconvénients, je te conseilles de mettre margin:10px 0 0 0; (en fait, cette manière d'écrire signifie : marge de 10 px en haut, 0 à droite, zéro en bas, zéro à gauche. Dans le sens des aiguilles d'une montre). Au fait, j'avais fait une erreur dans mon précédent mail, j'avais laissé un overflow:visible, qui est à retirer...

Normalement ça devrait le faire.

De rein pour les explications, c'est avec plaisir :)

Répondre à Fenrir

Fenrir, le 24 sep 2008 à 20:56:55

Euh, autant pour moi, ne tiens pas compte de mon précédent message, j'avais mal compris un truc. Je réfléchis, je te tiens au courant dès que possible.

Répondre à Fenrir

marsouin, le 24 sep 2008 à 21:03:54

Ben pourtant, le truc des marges fonctionne...

Répondre à marsouin

Fenrir, le 24 sep 2008 à 21:27:02

Oui, c'est ça : je te recommandes d'utiliser des marges pour apdiv1, plutôt que un top:10px; (mon précédent mail était bon, autant pour moi). Donc pour apdiv1 :

#apDiv1 {
position:relative;
margin:10px 0 0 0;
width:277px;
min-height:74px;
background:#993399;
}

Donc, marge de 10 pixels en haut. Comme ça, il se décalera de 10 pixels du haut de ton conteneur, sans dépasser en bas de 10 pixels...

Et en haut de ton fichier html, avant la balise <html>, je te recommandes d'utiliser un doctype (il précise quelle norme html utiliser : transitionnel ou strict) :

Par défaut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
+ la suite

ou :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
+la suite

Plus d'infos ici : http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

Bonne chance !

Répondre à Fenrir

marsouin, le 24 sep 2008 à 21:52:14

Oui, j'ai effectivement
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
au début. Je fais mon site avec dreamweaver, alors il fait tout ça automatiquement. J'avais raccourcis le code pour que ce soit plus pratique.

Merci beaucoup pour tous ces renseignements.

Répondre à marsouin

Fenrir, le 24 sep 2008 à 21:53:52

De rien, bonne éclate à toi pour ton site ;)

Répondre à Fenrir

marsouin, le 25 sep 2008 à 19:46:50

Personne n'aurait une solution pour moi ?

Répondre à marsouin

marsouin, le 25 sep 2008 à 10:51:10

DÃ©solÃ©, j'ai encore un problÃ¨me !

Je veux maintenant mettre dans mon contenant deux div cÃ´te Ã cÃ´te, toujours avec les mÃªmes fonctions. Je ne peux les mettre que l'un en dessous de l'autre. Je suppose qu'il y a un problÃ¨me avec l'attribut relative, mais je ne vois pas comment le rÃ©soudre.

le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">

</style>
</head>

<body>

<div id="contenant">
<div id="txt1"> ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 </div>
<div id="txt2">ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 </div>
</div>
</body>
</html>

Répondre à marsouin

Fenrir, le 25 sep 2008 à 20:16:43

Bonsoir Marsouin,

Déjà, je pense que tu peux mettre :

<style type="text/css">

</style>

Body : suppressions des margin et padding, pour avoir un affichage plus propre.

Le reste : Ensuite, par défaut, les div dans le même contenant vont l'un en dessous de l'autre. L'attribut float fait en sorte que les deux div vont l'un à côté de l'autre. J'ai testé, et je n'ai pas de problème, deux colonnes se créent.

Si j'ai bien compris ta question, ça devrait maintenant fonctionner.

Bonne chance pour la suite !

Répondre à Fenrir

marsouin, le 25 sep 2008 à 21:09:02

Effectivement ça fonctionne.

Par contre, le calque contenant ne s'agrandit plus, je ne bénéficie donc plus de ma couleur de fond ???

Répondre à marsouin

Fenrir, le 25 sep 2008 à 21:39:31

Ah oui, j'ai oublié de te dire : après tes deux div en flottant, il faut annuler l'effet de flottant, afin que le bloc container s'agrandisse normalement.

Dans ton code, il faut ajouter :

<div id="contenant">
<div id="txt1"> ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 ici mon texte 1 </div>
<div id="txt2">ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 ici mon texte 2 </div>
<br class="clear" />
</div>

Et dans tes styles :

.clear {
clear:left;
}

Ainsi, le problème devrait disparaître.

Répondre à Fenrir

marsouin, le 25 sep 2008 à 21:48:35

Tout est ok !

Un grand merci. Je n'y serais jamais parvenu sans toi...

Au risque d'abuser, si tu es aussi bon avec le java qu'avec les css, j'ai ouvert un autre fil là :
http://www.commentcamarche.net/forum/affich 8586363 phrase aleatoire en java

Répondre à marsouin

Fenrir, le 25 sep 2008 à 22:05:45

De rien Marsouin, c'était avec plaisir ! Pour le JavaScript, je vais regarder si je peux, mais je ne te garantis rien, car je suis pas super doué dans ce langage et la programmation...

Si tes questions sont résolues sur ce post, penses bien à le mettre en résolu ! ;)

Bonne chance !

Répondre à Fenrir

Posez votre question Répondre