Probleme de max-height

**baroutch** · 17/06/2009, 11h36

Bonjour à tous,
J'ai préparé la maquette d'un site à un tout petit détail près : la div qui contient le menu ne s'affiche pas jusqu'en bas. J'ai pourtant essayé height:100% et max-height:100px et rien n'y fait alors que cela marche avec mon content. Peut être un problème de compatibilité avec un autre css mais je ne trouve pas ce que cela peut être. Voici mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<body>
    <div id="corps">
        <div id="conteinerActu">
            <div id="contentActu">
              <p> 15 Juin 2009<br />
              </p>
              <h2>Lorem Ipsum dolor !</h2>
              Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.
              <p></p>
              <br />
              <p class="foto_actu"><img src="img/foto_actu.png" /></p>
              <p> 3 Juin 2009<br />
              </p>
              <h2>At vero eos et accusam</h2>
              Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
              <p></p>
              <br />
              <p> 15 Juin 2009<br />
              </p>
              <h2>Lorem ipsum dolor !</h2>
              Constituendi autem sunt qui sint in amicitia fines et quasi termini diligendi. De quibus tres video sententias ferri, quarum nullam probo, unam, ut eodem modo erga amicum adfecti simus, quo erga nosmet ipsos, alteram, ut nostra in amicos benevolentia illorum erga nos benevolentiae pariter aequaliterque respondeat, tertiam, ut, quanti quisque se ipse facit, tanti fiat ab amicis.
              <p></p>
              <br />
              <p> 23 Juin 2009<br />
              </p>
              <h2>At vero eos et accusam</h2>
              Horum adventum praedocti speculationibus fidis rectores militum tessera data sollemni armatos omnes celeri eduxere procursu et agiliter praeterito Calycadni fluminis ponte, cuius undarum magnitudo murorum adluit turres, in speciem locavere pugnandi. neque tamen exiluit quisquam nec permissus est congredi. formidabatur enim flagrans vesania manus et superior numero et ruitura sine respectu salutis in ferrum.
              <p></p>
              <br />
              <p> 25 Juin 2009<br />
              </p>
              <h2>Lorem ipsum dolor !</h2>
              Abusus enim multitudine hominum, quam tranquillis in rebus diutius rexit, ex agrestibus habitaculis urbes construxit multis opibus firmas et viribus, quarum ad praesens pleraeque licet Graecis nominibus appellentur, quae isdem ad arbitrium inposita sunt conditoris, primigenia tamen nomina non amittunt, quae eis Assyria lingua institutores veteres indiderunt.
              <p></p>
              <p> 3 Juin 2009<br />
              </p>
              <h2>At vero eos et accusam</h2>
              Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
              <p></p>
              <p></p>
            </div>
            </div>
        <div id="conteinerMenu">
            <div id="menu">
                 <img src="img/menu_actu.png" border="0" usemap="#Map" class="choix"/>
                 <map name="Map">
                    <area shape="rect" coords="136,114,193,131" href="agence1.html" />
                    <area shape="rect" coords="136,150,232,167" href="ressourceIn.html" />
                    <area shape="rect" coords="136,168,204,186" href="references.html" />
                 </map>
            </div>
        </div>
</div>
</body>

et mon code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
*
{
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        padding: 0px;
        margin: 0px;
}
 
body
{
        min-height:100%;
        height:100%;
        margin:0px;
        padding:0px;
        background-image:url(Img/fond.png);
        background-position:left;
        background-repeat:repeat-y;
        background-attachment:fixed;
}
 
#corps
{
        width:980px;
        margin:auto;
}
 
#conteinerActu
{        
        background-color:#00accb;
        min-width:70%;
        min-height:100%;
        width:70%;
        height:100%;
        float:left;
}
 
#contentActu
{
        width:90%;
        color:#FFFFFF;
        margin-left:30px;
        text-align:justify;
        margin-right:30px;
        margin-top:80px;
        position:relative;
        height:100%; 
        min-height:100%; 
}
 
.foto_actu
{
        margin-right:10px;
        float:left;
}
 
#menu
{
        background-color:#FFFFFF;
        margin-top:200px;
}
 
#conteinerMenu
{
        background-color:#FFFFFF;
        min-width:30%;
        width:30%;
        float:left;
        height:100%;
        min-height:100%;
}

Si qqn a une idee de ce qui cloche votre aide est la bienvenue
Merci d'avance

**voleurdecarottes** · 17/06/2009, 12h22

Le rendu n'est pas du tout le même sur Firefox que sur IE. C'est normal? Sur Firefox conteinerMenu prend bien toute la hauteur voulue.

**baroutch** · 17/06/2009, 12h32

C'est bizarre sur mon IE8 cela s'affiche pareil. T'as peut être une version antérieure à la mienne. Mais ce site reste une maquette. Il me faut juste faire descendre la div contenant le menu jusqu'en bas. De plus les gabarits proposés ne conviennent pas à ce que je recherche. J'ai besoin d'un gabarit avec deux div centrées et qui prennent toute la hauteur de la page. Je pense plutot que le max-height est en conflit avec un autre css mais je ne sais pas trop quoi.
Mais merci quand même de m'aider toute suggestion est la bienvennue.

**voleurdecarottes** · 17/06/2009, 12h47

Effectivement je suis sur IE6

Il me semble que sur IE6 min-height et max-height n'étaient pas reconnus, je ne sais pas ce qu'il en est pour IE8 j'ai perdu l'habitude de batailler avec les navigateurs qui ont des soucis pour appliquer les normes.

Du coup si ça reste une maquette comme tu dis, passe à Firefox

**Macmillenium** · 17/06/2009, 12h55

Envoyé par voleurdecarottes

IE6 min-height et max-height n'étaient pas reconnus, je ne sais pas ce qu'il en est pour IE8 j'ai perdu l'habitude de batailler avec les navigateurs qui ont des soucis pour appliquer les normes.

min-height et max-height sont supportés par IE à partir de la version 7.

**baroutch** · 17/06/2009, 12h56

C'est ce que je fais mais si tu remarque bien le max-height marche pour le contener principal mais pas pour le menu. Mets une image fond.png toute noire et tu verra que la div du menu n a pas le même comportement que l'autre.

**voleurdecarottes** · 17/06/2009, 15h07

Il y a bien une différence entre tes 2 divs: conteinerActu contient du texte alors que conteinerMenu non. Supprime du texte et tu verras que tu auras exactement le même problème avec conteinerActu.

En gros, le bas du div se cale par rapport à son contenu.

**Candygirl** · 17/06/2009, 15h10

Bonjour,

Tu devrais être un peu plus clair pour expliquer le résultat final que tu souhaites obtenir; par exemple, donner une image.

Je ne comprends pas trop l'intérêt de définir à chaque fois un min-heigh et un min-width alors que tu spécifies aussi un width et height précis?

Envoyé par baroutch

J'ai pourtant essayé height:100% et max-height:100px et rien n'y fait alors que cela marche avec mon content.

Qu'est-ce qui marche sur ton content ? en tous cas pas ton height de 100% qui est aussi intuile que celui du menu

Dans la candidate recommendation css 2.1 il est dit:

<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

Ton height en % n'est pris en compte que si le height du parent est explicitement spécifié (hors positionnement absolu), ce qui n'est pas ton cas. La valeur du height de #conteinerMenu et de #conteinerActu est donc en réalité auto puisque leur parent, #corps, n'a pas de height spécifié explicitement.

Probleme de max-height

CSS

Vue hybride

Discussions similaires

Partager

Partager