[HTML][CSS] Hauteur 100% et largeur 100% non conformes sous Firefox

**KpTn** · 10/05/2006, 10h35

J'ai un petit problème que je n'arrive pas à résoudre mais peut etre pourrez vous m'y aider !

Je veux que le contenu de mon document HTML occupe toute la largeur et toute la hauteur de la fenetre. Je lui ai donc donné 100% en hauteur et largeur.
Dans mon document j'ai ensuite trois divs :

une div au sommet de la page
deux divs en dessus de la première positionnées en float:left

Mon problème est le suivant : sous IE mon document s'affiche comme je le veux. Sous Firefox la taille 100% en hauteur comme en largeur est en réalité plus grande que la fenêtre et donc mon document dépasse. De plus mes 2 divs positionnées en float:left de largeur respectives 15% et 85% se trouvent en fait l'une en dessous de l'autre.
On dirait un problème de padding or je les ai tous mis à 0.

Voila ma feuille de style :

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
71
72
 
@CHARSET "ISO-8859-1";
 
html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
 
.menu ul,.menu li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
.header
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 15%;
    border: thin solid #00ff00;
    float: left;
}
 
.menu
{
    margin: 0;
    padding: 0;
    width: 15%;
    height: 85%;
    border: thin solid #00ff00;
    float: left;
}
 
.content
{
    margin: 0;
    padding: 0;
    float: left;
    width: 85%;
    height: 85%;
    border: thin solid #00ff00;
    float: left;
}
 
.menu a
{
    color: #323499;
    text-decoration: none;
}
 
.menu a:hover
{
    background-color: #ff0000;
}
 
.menu a:visited
{
    color: #323499;
}
 
.menuSubLinks
{
    padding-left: 0.75em;
    position: relative;
}

et voila le fichier html correspondant :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" href="styles/baseStyles.css">
        <script type="text/javascript">
        window.onload = start
 
        function start() {
            $('smenu2').style.display = "none";
            $('smenu3').style.display = "none";
            $('smenu4').style.display = "none";
        }
 
        function toggleSubLinks(subLinkDiv) {
            new Effect.toggle($(subLinkDiv),'appear');
        }
        </script>
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script>
    </head>
    <body>
        <div id="header" class="header">a
        </div>
        <div id="menu" class="menu">
            <div><a href="#">Menu 1</a></div>
            <div><a href="#" onclick="toggleSubLinks('smenu2');">Menu 2</a></div>
            <div id="smenu2" class="menuSubLinks">
                <div>
                    <ul>
                        <li><a href="#">Sous-Menu 2.1</a></li>
                        <li><a href="#">Sous-Menu 2.2</a></li>
                        <li><a href="#">Sous-Menu 2.3</a></li>
                    </ul>
                </div>
            </div>    
            <div><a href="#" onclick="toggleSubLinks('smenu3');">Menu 3</a></div>
            <div id="smenu3" class="menuSubLinks">
                <ul>
                    <li><a href="#">Sous-Menu 3.1</a></li>
                    <li><a href="#">Sous-Menu 3.2</a></li>
                    <li><a href="#">Sous-Menu 3.3</a></li>
                    <li><a href="#">Sous-Menu 3.4</a></li>
                    <li><a href="#">Sous-Menu 3.5</a></li>
                    <li><a href="#">Sous-Menu 3.6</a></li>
                </ul>
            </div>
            <div><a href="#" onclick="toggleSubLinks('smenu4');">Menu 4</a></div>
            <div id="smenu4" class="menuSubLinks">
                <ul>
                    <li><a href="#">Sous-Menu 4.1</a></li>
                    <li><a href="#">Sous-Menu 4.2</a></li>
                </ul>
            </div>
        </div>
        <div id="content" class="content">a
        </div>
    </body>
</html>

Si quelqu'un peut m'aider à résoudre ce problème merci d'avance

**blueice** · 10/05/2006, 10h40

C'est normal !

Enlève tes "border" gros nigaud

Tu demandes 100% mais tu ne tiens pas compte des bords 100%+bord = + que ta fenêtre LOL

**KpTn** · 10/05/2006, 10h42

Oups !!! Désolé pour cette question idiote !!
Merci quand même !

**blueice** · 10/05/2006, 10h54

C'est pas idiot comme question, juste que tu avais la solution devant ton nez !

Utilise des "background" en couleur la prochaine fois, tu n'auras pas ce problème et tu délimiteras tes zones

[HTML][CSS] Hauteur 100% et largeur 100% non conformes sous Firefox

Dimensionnement en CSS

Discussions similaires

Partager

Partager