Dimensionnement en "%" de la fenêtre

**patricktoulon** · 04/02/2018, 11h50

bonjour a tous
j'ai un soucis avec le dimentionnement du body et d'un div a l'interieur
je voudrais que automatiquement il soit a 99% de la taille de la fenetre mais visiblement ca ne fonctionne pas

Code CSS :

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
 
BODY{
 width:99%;
 height:99%;
  margin-top:1px;
 margin-left:1px;
 border:1px solid green;
}
#panne{
 width:99%;
 height:20pt;
background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
 border: 1px solid black;
 display:block;
}
#editeur{
 width:99%;
 height:99%;
 font-size:18px;
 float:left;
 border:1px solid gray
}

quelqu'un a une idée

**JefReb** · 04/02/2018, 12h05

Bonjour Patrick,
Sans aucune agressivité,

, si tu rajoutais un petit peu de html, (on est pas devant ton écran) cela nous faciliterait un peu pour chercher.
car ... qu'est-ce que #panne et #editeur?

**patricktoulon** · 04/02/2018, 12h14

bonjour et merci pour le retour

se sont des balises DIV tout simplement
toute deux enfant direct du body

Code HTML :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html >
<html>
<head>
<html lang="fr">
<!--meta charset="utf-8"-->
<meta http-equiv="X-UA-Compatible" content="IE=10">
<style>
BODY{
 width:99%;
 height:99%;
  margin-top:1px;
 margin-left:1px;
 border:1px solid green;
}
#panne{
 width:99%;
 height:20pt;
background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
 border: 1px solid black;
 display:block;
}
#editeur{
 width:99%;
 min-height:99%;
 font-size:18px;
 float:left;
 border:1px solid gray
}
.fondbouton{
 display:block;
  background-color:#F2F2F2
  width:25px;
 height:25px;
 margin-left:5px;
 margin-top:3px;
 border:1px solid black;
 float:left;
 border-radius:7px;
}
.bouton{
 width:104%;
 height:102%;
}
.fondbouton:hover {
border:1px solid red;
}
#palette{
 background-color:gray;
  font-size=1px;
 display:block;
  width:190px;
  height:170px;position:absolute;
  top:30px;
  left:5px;
  border:1px solid black;
}
.Bcolor{
  font_size:0px;
  fload:left;
  width:15px;
  height:15px;
  margin-top:0px;
  margin-left:0px;
  border;1px solid black;
}
#fname{
  position:absolute;
  top:30px;
  left:120px;
}
#fsize{
  position:absolute;
  top:30px;
  left:145px;
  width:80px;
}
p{
 margin:0
}
</style>
 
<script type="text/javascript">
 
</script>
</head>
<body>
<DIV id=panne></div>
<div id="editeur" contenteditable=true></div>
</body>
</html>

**JefReb** · 04/02/2018, 12h23

J'espère que ma réponse n'est pas stupide.
Cela marche parfaitement, mais il faut mettre #panne et #editeur à 100%

Code html :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html >
<html>
<head>
<html lang="fr">
<!--meta charset="utf-8"-->
<meta http-equiv="X-UA-Compatible" content="IE=10">
<style>
BODY{
 width:99%;
 height:99%;
  margin-top:1px;
 margin-left:1px;
 border:1px solid green;
}
#panne{
 width:100%;
 height:20pt;
background: linear-gradient(to right, rgba(247,251,252,1) 0%,rgba(217,237,242,1) 40%,rgba(173,217,228,1) 100%); 
 border: 1px solid black;
 display:block;
}
#editeur{
 width:100%;
 min-height:99%;
 font-size:18px;
 float:left;
 border:1px solid gray
}
.fondbouton{
 display:block;
  background-color:#F2F2F2
  width:25px;
 height:25px;
 margin-left:5px;
 margin-top:3px;
 border:1px solid black;
 float:left;
 border-radius:7px;
}
.bouton{
 width:104%;
 height:102%;
}
.fondbouton:hover {
border:1px solid red;
}
#palette{
 background-color:gray;
  font-size=1px;
 display:block;
  width:190px;
  height:170px;position:absolute;
  top:30px;
  left:5px;
  border:1px solid black;
}
.Bcolor{
  font_size:0px;
  fload:left;
  width:15px;
  height:15px;
  margin-top:0px;
  margin-left:0px;
  border;1px solid black;
}
#fname{
  position:absolute;
  top:30px;
  left:120px;
}
#fsize{
  position:absolute;
  top:30px;
  left:145px;
  width:80px;
}
p{
 margin:0
}
</style>
 
<script type="text/javascript">
 
</script>
</head>
<body>
<DIV id=panne></div>
<div id="editeur" contenteditable=true></div>
</body>
</html>

**patricktoulon** · 04/02/2018, 12h44

re
non meme 100% ne fonctionne pas ,mais dans tout les cas j'ai besoins de cet espace vide a droite pendant l'ecriture et test du document je le mettrais a 100 a la fin
avec cet espace j'ai le menu COMPLET au click droit de windows dans IE
voila le resultat que j'obtiens

Nom : Capture.JPG
Affichages : 213
Taille : 46,8 Ko

Nom : Capture.JPG
Affichages : 213
Taille : 46,8 Ko

**psychadelic** · 04/02/2018, 13h48

Ta question est imprécise
Les 99% tu les a mais en largeure, et tu le sais bien

Donc je suppose que tu recherche des 99% en hauteur.

Quand tu écris : BODY{ height:99%; c'est une notion de relation entre 2 entitées ou celle qui est subordonnée fait 99% de la premiere, ici e, l'occurence l'élément parent de BODY c'est HTML.

et tu considère que ce parent couvre tout l'espace de la fenêtre d'un navigateur.
Ce qui est faux bien sur.
les navigateurs se contentent de remplir leurs pages au fur et à mesure et si ça dépasse en hauteur il placent un scroll.
Donc si tu à 3 ou 4 lignes à placer, ben ta page elle fait 3 ou 4 lignes en hauteur au final, sur lequel tu demande de n'en occuper que 99%...
C'est pas très rationnel.

C'est un peu comme à l'époque des Papyrus, le déroulé ce faisait horizontalement, donc on avait un déroulé horizontal, et quand c'était trop grand on plaçait des rouleau.
Un peu aussi comme pour la tapisserie de Bayeux, c'est finalement un grand récit écrit pas panneaux successifs placés horizontalement cote à cote; etc...
Il y a aussi le fait qu'on utilise un systeme d'écriture horizontal, et que la lecture s'effectuait en faisant courir un doigt sous les lettre pour une lecture à voix haute (la lecture silencieuse n'arrive que bien plus tard) eque donc dérouler un parchemin verticalement compliquerait un peu les choses aussi.

mais je m'égare, je m'égare...

Tout ça pour te dire que sur les anciens navigateurs du moyen age, ton problème n'avait pas de solutions.

Aujourd'hui tu a juste a placer dans ton css: html { height:100% }

c'était si bête

Invité · 04/02/2018, 13h50

Bonjour,

Code html :

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

1
2
<div id=panne></div>
...

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#palette{
...
  font-size=1px;
...
}
.Bcolor{
  font_size:0px;
  fload:left;
...
  border;1px solid black;
}

Comme je te l'ai déjà dit, tu manques de rigueur...

Ensuite, il faut prendre un peu de temps pour LIRE un tuto sur les bases du CSS.
Là, tu appliques pour les lartgeurs/hauteurs tantôt des %, tantôt des px, voire des pt...

**JefReb** · 04/02/2018, 13h52

Désolé d'insister, il doit y avoir une incompréhension quelque part.
Je prends exactement ton code donné en post 3
et je remplace #panne et #editeur par 100% au lieu de 99% et je n'obtiens pas du tout ta capture.
Voir le codepen:
https://codepen.io/JefReb/pen/KQzqyW

Dimensionnement en "%" de la fenêtre

Dimensionnement en CSS

Vue hybride

Partager

Partager