[CSS]Résolution et taille ajustée ?

**elitost** · 05/05/2006, 14h59

bonjour,

Je souhaite utiliser des div dans un site afin de créer un cadre.

j'aurai donc un code html comme suit :

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
 
<html>
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
  <link rel="stylesheet" type="text/css" href="styles.css">
 
  <title>Positionnement CSS</title>
</head>
 
 
<body>
 
 
<div id="bandeau">Ceci est le bandeau</div>
 
 
<div id="menu">
 
menu
 
    </div>
 
<div id="pied_page">Ceci est le pied de page</div>
 
</body>
</html>

J'essaie avec ce style suivant :

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
div {
    text-align:center;
    }
div#bandeau {
    width:100%;
    height:20%;
    background-color:#00CCFF;
    }
div#menu {
    float:left;
    width:10%;
    height:80%;
    background-color:#33FF99;
    }
 
div#pied_page {
    clear:both;
    width:100%;
    height:20%;
    background-color:#33FF99;

Mais malgré le height:80%; sur div#menu , la hauteur de mon menu ne prend pas toute la hauteur du navigateur.

Une idée ?

merci d'avance

**franculo_caoulene** · 05/05/2006, 15h08

Salut,

Chez moi ça dépasse et affiche les scrollbars. Je ne comprends pas ce que tu cherches à avoir.

**masu** · 05/05/2006, 16h19

ca a l'air d'etre a la mode les auteurs proportionelles.
ajoute ca a ton css

Code :

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

1
2
3
4
5
6
7
* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%
}

puis debrouille toi pour que la somme des height fassent 100%

la tu a 20%+80%+20%=120% :p
voila

**elitost** · 05/05/2006, 16h24

Envoyé par masu

ca a l'air d'etre a la mode les auteurs proportionelles.
ajoute ca a ton css

Code :

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

1
2
3
4
5
6
7
* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%
}

puis debrouille toi pour que la somme des height fassent 100%

la tu a 20%+80%+20%=120% :p
voila

Super ça fonctionne bien maintenant, merci .

Mais c'est quoi ce * dans ce que tu m'as fais ajouter ? cela veut dire, pour tous les éléments ?

**masu** · 05/05/2006, 16h55

oui le * c'est pour tout les elements.
on est obligé d'enlever tout les margin padding et border car la place réelement prise par un bloc est taille=width+padding+margin+border
sauf sous IE qui ne respecte pas les recommandation

donc si tu met du padding ou margin ou border sur un element soit (top soit bottom), la hauteur de ton document sera 100%+les marges et la bordure d'ou une apparition de bar de scroll.

**elitost** · 05/05/2006, 17h02

Super, je te remercie bien.

**elitost** · 05/05/2006, 16h21

En pièces jointes les fichiers nécessaires.

On voit sur la copie d'écran que le bandeau menu à droite ne prend pas toute la hauteur de la page, et c'est ce que je souhaiterais.

Par contre je n'ai pas de scrollbars comme tu peux le voir.

Des idées ?

[CSS]Résolution et taille ajustée ?

CSS

Vue hybride

Discussions similaires

Partager

Partager