div float et hauteur

Version imprimable

20/04/2007, 11h11
Bruno@Home

div float et hauteur
bonjour,
je vous montre un bout de code:
Code:

1 2 3 4 5 6 7 8 9 10 <div class="conteneur"> <div style="float: right; height: 100%"> bla bla </div> bla bla </div> <div class="conteneur"> bla bla </div>
mon problème c'est que le 2ème div ne veut pas prendre les 100% de conteneur en hauteur (s'il est plus petit, il reste plus petit et s'il est plus grand, du coup le 2eme conteneur passe par dessus)

je suis un peu perdu là.

Bruno.
20/04/2007, 11h19
E.Bzz

Bonjour,

Code:

style="margin:0px;padding:0px;"

A+
20/04/2007, 11h34
Bruno@Home

merci mais je mets ça où et c'est censé faire quoi ? Dans les tests que j'ai fait, ça ne change rien...

Bruno.
20/04/2007, 11h41
E.Bzz

Dans les <div>
Mais ce n'était qu'une piste : tout dépend des class (donc styles) existantes, qu'il faudrait donner ;)

en fait ma class conteneur n'a rien de spéciale :
Code:

1 2 3 4 5 6 .conteneur { font: 95% Arial, sans-serif; color:#333; padding: 0.2em; margin: 1em; }
Bruno.

20/04/2007, 11h57
E.Bzz

Citation:

Envoyé par Bruno@Home

en fait ma class conteneur n'a rien de spéciale :

Si : un padding et un margin > 0.
Le 100% du parent ne doit pas pouvoir être atteint.
20/04/2007, 12h10
Bruno@Home

oui :? mais le problème est plus profond. C'est que si le div en question ne contient d'une ligne de texte alors sa hauteur fait une ligne de texte même si son parent en fait 20...

Bruno
20/04/2007, 14h54
Candygirl

Tu ne peux attribuer un height en % que si le height du parent est directement spécifié. Dans le cas contraire c'est la valeur auto qui sera appliquée, ce qui se passe dans ton cas puisque le parent n'a pas de height défini.
20/04/2007, 16h14
Bruno@Home

Bon d'accord. Mais si c'est auto, la hauteur va se regler en fonction de son propre contenu hors je veux qu'elle se regle en fonction de la hauteur de son parent... y a un moyen de faire ca ?

Bruno.
20/04/2007, 16h36
E.Bzz

Citation:

Envoyé par Bruno@Home

y a un moyen de faire ca ?

La dame a dit qu'il faut que la hauteur du parent soit explicitement fixée ...
... et je me risquerait pas à la contredire !

:mrgreen:

bon depuis j'ai trouvé, il faut faire

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div class="conteneur">
  <div style="float: right; height: 100%">
     bla bla
  </div>
  bla bla
  <hr style="clear: both; visibility: hidden;" />
</div>
<div class="conteneur">  
  bla bla
</div>

31/05/2007, 15h12
pierrot10

Salut CandyGirl,
J'ai une petite question suite a ta remarque.

Citation:

Tu ne peux attribuer un height en % que si le height du parent est directement spécifié

Mais mon parrent a une hauteur fixe de 20px et que son div enfant est a 100%. Il risque d'avoir un scroll-bar permanetnt non? Que veux tu dire par "directement scpécifié"?

Tks
31/05/2007, 15h22
E.Bzz

Citation:

Envoyé par pierrot10

Mais mon parrent a une hauteur fixe de 20px et que son div enfant est a 100%. Il risque d'avoir un scroll-bar permanetnt non?

Ca dépend de son contenu et du overflow que tu lui donnes (avec overflow:hidden il n'aura jamais de scroll).

Citation:

Envoyé par pierrot10

Que veux tu dire par "directement scpécifié"?

En CSS et directement dans le tag HTML (css intra-ligne : pas dand le head ni en .css include, ni via une class).

CandyGirl corrigera à son retour si j'ai dit des bêtises en son nom :aie:
31/05/2007, 15h41
pierrot10

Salut,
Ta réponse me laisse dans le doute car j'ai un <div> vide, donc sans contenu (pour le moment). avec un div parent de 20px et un div enfant de 100% (en hauteur donc), j'ai le un scroll-bar permanent.
Par contre je ne veux pas mettre de overflow:hidden, car dans le cas ou mon texte depassait la hauteur de la hauteur du browser, je n'aurais plus de scroll-bar. Et la problème
Qu'en pense tu?
31/05/2007, 15h52
Candygirl

Citation:

Envoyé par E.Bzz

CandyGirl corrigera à son retour si j'ai dit des bêtises en son nom :aie:

Oui, je corrige, mais c'est moi qui me suis mal exprimée, le "directement" au lieu de "explicitement" étant maladroit, excuse-moi ;)

En fait le height doit être spécifié, mais peu importe si c'est dans un css externe ou dans la balise:

Citation:

Envoyé par w3c

<pourcentage>
Spécifie une hauteur en pourcentage. Celui-ci est calculé en fonction du bloc conteneur de la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c.à.d., celle-ci dépendant de la hauteur du contenu), sa valeur est considérée comme étant 'auto' ;

Citation:

Envoyé par pierrot10

Salut,
Ta réponse me laisse dans le doute car j'ai un <div> vide, donc sans contenu (pour le moment). avec un div parent de 20px et un div enfant de 100% (en hauteur donc), j'ai le un scroll-bar permanent.

Quelque chose du genre ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!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=iso-8859-1" /> <title>test</title> <style type="text/css"> * {margin:0;padding:0;} div {height:100px; overflow:auto; width:300px;} p {height:100%;} </style> </head> <body> <div><p>sdgdgfg</p></div> </body> </html>
Je n'ai perso pas de scroll-barre permanente?

Mais j'ai peut-être mal compris...

31/05/2007, 18h46
pierrot10

Salut candygirl,
Ecoute, je préfere te rediriger vers mon post, pour ne pas mélanger ma question avec celle de l'inititeur de ce post et aussi pour ne pas avoir un espece de doublon ... :lol: . Mon cas est similaire c'est pourquoi j'ai intervenu
http://www.developpez.net/forums/sho...98#post2132398

Dans mon cas j'ai un div général avec une hauteur de 100% et un margin-top:10px. Et la j'ai un scroll bar sous FF