Une div prenant tout l'écran

**Caxton** · 11/07/2011, 15h36

Bonjour,

J'ai un peutit souci de conception en css + div.

Je cherche à faire en sorte d'un div principal prenne toute la largeur et toute la longueur de la fenêtre quel que soit la taille de celle-ci.

J'ai tenté un height: 100% et hélas, même si je la force dans le html et le body, c'est la même chose.

Donc je m'en retourne vers vos lumière pour comprendre ce qui peut fonctionné ou non pour que le css s'adapte.

Pour le moment j'ai écrit cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
body {
    background: none repeat scroll 0 0 #FFFFFF;
}
 
#ecran {
	/*margin: auto;*/
 
	position: relative;
	/*width: 100%;*/
 
	font-family: Verdana;
	font-size: 10pt;
}

Niveau html il y a rien de rare non plus... Bref je cherche quoi

*

Merci pour vos indications, aide pour ce que je n'aurais pas su

**cijez** · 11/07/2011, 15h43

Salut,

pour que cela marche il te faudra un doctype dans ton html

ensuite en css il faut que tu ajoutes

Code :

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

1
2
3
4
html,body{
width:100%;
height:100%;
}

sans oublié de mettre à body

Code :

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

margin:0;

et ensuite tu peux mettre ton div en width et height 100%

**Caxton** · 11/07/2011, 15h53

Ok, ça confirme donc mes craintes

En effet, je viens de tester ça fonctionne

Seulement ensuite ça ne m'avance pas plus. La portion que j'aimerais voir agrandi reste petite. Comme elle est situer dans ce div, forcément elle prends des dimensions fixe

Bon bah je vais devoir faire autrement pour que la fenêtre de mon t'chat et de mes contact paraisse ouverte même avec une page qui doit se redimensionné

Peut-être une solution su je force la div interne à un % ?

**cijez** · 11/07/2011, 15h56

tu as oublié un bout à ton problème

tu veux faire quoi maintenant ?

**Caxton** · 11/07/2011, 16h11

Au départ je pensait que le div dans le div prendrais la même taille... mais en fait non

Peut-être ai-je intérêt à poster le code entier

**cijez** · 11/07/2011, 16h26

une div prend la largeur de son parent
et de base la hauteur dépend de son propre contenu

mais avec le code précédent rien ne t'empêche de mettre une hauteur en % (100%,50%..)

**Caxton** · 11/07/2011, 16h40

Ah wai, donc... il faut que je comprenne pourquoi il ne le fait pas

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="author" content="{:Site/metaAuteur:}" />
		<meta name="identifier-url" content="{:Site/metaUrl:}" />
 
		<meta name="description" content="{:Chat/description:}" />
		<meta name="keywords" content="{:Chat/motsclefs:}" />
		{:Site/favicone:}
 
		<title>{:Chat/title:} - {:Site/nomDuSite:}</title>
 
		<link rel="stylesheet" type="text/css" href="/design/chat/mentions.css" />
 
		{:Site/fonctionsJs:}
	</head>
	<body>
		<div id="ecran">
			<div id="onglets" style="border: 1px #0A1940 solid;">onglets</div>
			<div id="zone1">
				<div id="speak">
					discussion
				</div>
				<div id="options">
					options
				</div>
				<div id="saisie">
					<textarea></textarea>
				</div>
			</div>
			<div id="zone2">
				<div id="statut">
					statut
				</div>
				<div id="caneaux">
					canal
				</div>
			</div>
			<div class="Jumper"></div>
		</div>
	</body>
</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
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
91
92
93
94
95
96
97
98
99
/**
 * Style css de mise en forme du t'chat
 * */
 
html,body{
	width: 100%;
	height: 100%;
}
 
body {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0;
}
 
#ecran {
	/*margin: auto;*/
 
	position: relative;
	/*width: 100%;*/
 
	font-family: Verdana;
	font-size: 10pt;
}
 
#onglets {
	height: 30px;
	border: 1px #0A1940 solid;
	background-color: #244698;
}
 
#zone1 {
	float: left;
	position: absolute;
	width: 75%;
	margin-top: 3px;
}
 
#speak {
	/*height: 400px;*/
	height: 100%;
	border: 1px #0A1940 solid;
	overflow-x: hidden;
	overflow-y: scroll;
}
 
#options {
	height: 30px;
	margin-top: 3px;
}
 
#saisie {
	height: 51px;
	border: 1px #0A1940 solid;
}
 
#saisie textarea {
	border: 0px;
	height: 50px;
    width: 99%;
}
 
#zone2 {
	position: absolute;
	width: 24%;
	margin-top: 3px;
	margin-left: 76%;
}
 
#statut {
	height: 30px;
	border: 1px #0A1940 solid;
	background-color: #244698;
}
 
#caneaux {
	margin-top: 3px;
	height: 452px;
	border: 1px #0A1940 solid;
	overflow-x: hidden;
	overflow-y: scroll;
}
 
 
 
 
 
 
.Jumper {
	clear: both;
    overflow: hidden;
    font-size: 1px;
    line-height: 1px;
    height: 1px;
}
 
/*
 * -moz-border-radius: 10px 0 0 10px;
 * overflow-y: scroll;
 * */

**cijez** · 11/07/2011, 16h54

ton 100% à #speak n'a aucun repère

il manque le height 100% a #ecran et #zone1
(mais ton onglet à 30px va créé un décalage)

**Caxton** · 11/07/2011, 17h32

Donc, si je comprends bien, html puis en dessous body, puis en dessous ecran, puis en dessous... bref ils doivent tous avoir le height à 100% pour que ça fonctionne. Ok

Pour le décalage, j'ai pas bien compris.

**cijez** · 11/07/2011, 18h23

tu vas avoir ton onglet puis en dessous ta zone 1
30px+100% ce qui te donnera un scroll vertical

il faudra par exemple mettre ta div onglet en absolute par dessus tes zones
ou alors inclure tes onglets dans ta zone

mais ça c'est un autre problème

**Caxton** · 11/07/2011, 18h41

Autant les inclure dans la zone !

Mon html / css n'étant pas encore définitivement arrêter, je peux encore tout écrire différemment. Le tout est de savoir d'où on part et vers ou on va !

Demain, je tenterais de re écrire tout ça plus proprement et au travers de ce tread de trouvé la solution simple qui va faire que ça sera bien et correct niveau code.

**Caxton** · 12/07/2011, 09h50

Bonjour,

La nuit portant conseil, j'ai décidé de tout refaire complètement

J'ai donc appliqué mes width: 100% à html, body, ecran et zone1. Cependant zone1 ne prends toujours pas la place à 100%.

Au contraire elle se contente de garder une place dans l'écran à la taille de son contenu

Je vous place le nouveau css, l'html n'ayant pas foncièrement changé ormis le bandeau en haut que j'ai stripé en commentaire afin de regardé pourquoi mes zones ne font pas ce qui faut.

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
/**
 * Style css de mise en forme du t'chat
 * */
 
html, body {
	width: 100%;
	height: 100%;
}
 
body {
	margin: 0;
	background: none repeat scroll 0 0 #FFFFFF;
}
 
#ecran {
	width: 100%;
}
 
 
 
#zone1 {
	float: left;
	width: 100%;
	position: absolute;
	left: 1%;
	width: 74%;
 
	border: 1px #0E0E68 solid;
}
 
 
 
#zone2 {
	width: 100%;
	position:absolute;
	left: 76%;
	width: 23%;
 
	border: 1px #0E0E68 solid;
}
 
.Jumper {
	clear: both;
    overflow: hidden;
    font-size: 1px;
    line-height: 1px;
    height: 1px;
}

Erreur de ma part

Ça fonctionne bien

En fait j'avais confondu width et height et du coup je l'avait pas mis en bas dans mon css

**Elchee** · 11/03/2016, 16h09

Depuis css3, on peut faire quelque chose d'assez génial en ce qui concerne la taille relative des divs (et du reste d'ailleurs), à savoir qu'on peut faire prendre à un élément l'intégralité du viewport en utilisant l'élément: vh (viewport height). En effet, en tapant

Code :

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

1
2
3
4
div{
    height: 100vh;
    width: 100vw;
}

La div prend l'intégralité du viewport width et du viewport height quel que soit l'écran. C'est formidable car évite l'utilisation d'un script compliqué ou des medias queries.

Une div prenant tout l'écran

CSS

Discussions similaires

Partager

Partager