impossible de mettre le div height 100% de la page

**Royade** · 18/11/2012, 01h29

Bonsoir,

J'aimerai savoir si quelqu'un aurait une solution css pour donner à un div la taille en hauteur de 100% de la page en cours (et non pas 100% de la taille de la fenêtre du navigateur), ceci afin d'éviter qu'au moindre ascenceur, la partie à scroller se retrouve sans background (puisque n'est pas étirée jusqu'en bas).

Je vous explique concretement et je vous mettrais le code ci-dessous:
-le 1er div "#page" qui englobe toute la page avec une largeur de 980 px pour pouvoir centrer le div.
-le 2eme div "#page_sans_menu" qui est de 950px qui est collé a droite du 1er div.
-le 3eme et dernier div "#page_avec_menu" qui est collé sur la gauche du 1er div et j'aimerais bien qu il descende jusqu au bout

J'ai crée un code html et css similaire:

Le code html

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>page test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
	</head>
 
	<body>	
 
		<header>			
		</header>
 
		<div id="page">		
				<div id="page_avec_menu">
						<nav class="menu_vertical">
							<ul>
								<li><a href="#">lien1</a></li>
								<li><a href="#">lien2</a></li>
								<li><a href="#">lien3</a></li>
								<li><a href="#">lien4</a></li>
								<li><a href="#">lien5</a></li>
								<li><a href="#">lien6</a></li>
								<li><a href="#">lien7</a></li>
								<li><a href="#">lien8</a></li>
							</ul>
						</nav>			
				</div>
 
				<div id="page_sans_menu">			
						<section class="preface">
						</section>
 
						<section class="preface_commentaire">
						</section>
 
						<section class="commentaire">																					
						</section>		
				</div> 	
		</div> 
 
		<footer>
		</footer>
 
	</body>
</html>

Le code CSS nommé "design".

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
100
101
102
103
104
105
106
107
108
109
110
111
112
html
{
	 min-height: 100%;
}
body
 {
	min-height: 100%;
	padding:0;
	margin:0;
	background-color:grey;
}
 
header
{	
	margin:0;
	width: 100%;
	height:115px; 
	border-top: 3px white groove;
	background-color:#6f95bb;
}
 
#page /*represente la page invisible permettant d'ajuster les 2 pages: "page_avec_menu" et "page_sans_menu"(bordure bleu)*/
{
	margin:auto;
	width:980px;
	min-height: 100%;
	border: 3px blue inset;
}
#page_sans_menu /* represente la page sans le menu*/
{	
	position:relative;
	width:950px;
	min-height: 100%;
	margin-top:0px;
	margin-left:30px;
	border:3px yellow inset;	
	background-color:#f0f0f0;	
}
#page_avec_menu /*represente le menu vertical(bordure rouge)*/
{
	float:left;
	position:absolute;
	width:980px;
	min-height:100%;
	margin-top:0px;
	margin-left:0px; 
	border:3px red inset;	
	z-index:1;
}
 
.menu_vertical
 {		
	width:168px;
	min-height: 100%;
	border:1px #808080 outset;
	border-right:none;
	border-bottom:none;
	margin-top:10%;
	background-color:#f0f0f0;
}
 
.menu_vertical ul
{
    list-style-type:none;
}
.menu_vertical li  
{	
	text-align:left;
	border-bottom:1px #808080 inset;
	padding-top:4px;
	padding-bottom:4px;
}
 
 
.preface
{	
	width:650px;
	height:325px;
	border:3px #808080 inset;
	margin-top:80px;
	margin-left:240px;
}				
.preface_commentaire
{
	position:relative;
	width:650px;
	height:325px;
	border:1px black solid;
	background-color:#f2f4f8;
	margin-top:20px;
	margin-left:244px;
	font-size:13px;
}
.commentaire
{	
	position:relative;
	width:650px;
	height:325px;
	border: 1px black solid;
	margin-top:20px;
	margin-left:244px;
}
 
footer
{
	position:relative;
	width:100%;
	height:150px; 
	margin-top:50px;
	background-color:red;
	border:1px #b0cbeb solid;
}

J'aimerais si cela est possible que le div "page_avec_menu" descende aussi loin que descende "page_sans_menu".

Merci d'avance de m'éclairer de vos lumières.

**NoSmoking** · 18/11/2012, 12h41

Bonjour,
ajoutes une position:relative à ta DIV id="page" et une position:absolute à ta DIV id="page_avec_menu", les choses devraient s'améliorer.

Nota : il est préférable d'utiliser un background-color plutôt qu'une border pour la visualisation des différents éléments.

**Royade** · 18/11/2012, 13h34

Bonjour,
ajoutes une position:relative à ta DIV id="page" et une position:absolute à ta DIV id="page_avec_menu", les choses devraient s'améliorer.

Merci pour ta réponse déjà!
La position:absolute à la DIV id="page_avec_menu" était deja mis!
Tu n'as pas du comprendre ou plutôt j'ai du mal exprimé mon problème, je ne veux pas non seulement que le bloc ai une hauteur de 100% mais que le menu suive aussi.. qu il fasse toute la page, que le menu descende aussi loin que descende le div "page_sans_menu".

**NoSmoking** · 18/11/2012, 14h23

La position:absolute à la DIV id="page_avec_menu" était deja mis!

manquait la relative sur la page, qui change tout.

Pour la NAV

Code :

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

1
2
3
4
5
6
7
8
9
.menu_vertical{
  width:168px;
/*  min-height: 100%;  /* REMPLACE PAR 90% */
  min-height: 90%;   /* TIENS COMPTE DU MARGIN */
/*  margin-top:10%;    /* SUPPRIME */
  top:10%;           /* REMPLACE MARGIN-TOP */
  bottom:0;          /* AJOUT */
  position:absolute; /* AJOUT */
}

j'ai quand même du mal à voir pourquoi imbriquer une NAV dans une DIV juste pour le plaisir !

**Royade** · 18/11/2012, 15h02

j'ai quand même du mal à voir pourquoi imbriquer une NAV dans une DIV juste pour le plaisir !

exacte, ca sert pas a grand chose je remplacerais!

Citation:
La position:absolute à la DIV id="page_avec_menu" était deja mis!
manquait la relative sur la page, qui change tout.

Pour la NAV

Code :

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

1
2
3
4
5
6
7
8
9
.menu_vertical{
  width:168px;
/*  min-height: 100%;  /* REMPLACE PAR 90% */
  min-height: 90%;   /* TIENS COMPTE DU MARGIN */
/*  margin-top:10%;    /* SUPPRIME */
  top:10%;           /* REMPLACE MARGIN-TOP */
  bottom:0;          /* AJOUT */
  position:absolute; /* AJOUT */
}

j'ai quand même du mal à voir pourquoi imbriquer une NAV dans une DIV juste pour le plaisir !

Je suis déjà arrivé a ce résultât la, mais se que je cherche: je ne veux pas non seulement que le bloc ai une hauteur de 100% mais que le menu suive aussi.. qu il fasse toute la page, que le menu descende aussi loin que descende le div "page_sans_menu". 100% de la page en cours et non pas 100% de la taille de la fenêtre du navigateur, ceci afin d'éviter qu'au moindre ascenceur, la partie à scroller se retrouve sans background (puisque n'est pas étirée jusqu'en bas).

Merci en tout cas de te pencher sur le problème.

**NoSmoking** · 18/11/2012, 16h04

Envoyé par Royade

Je suis déjà arrivé a ce résultât la, mais se que je cherche: je ne veux pas non seulement que le bloc ai une hauteur de 100% mais que le menu suive aussi.. qu il fasse toute la page, que le menu descende aussi loin que descende le div "page_sans_menu". 100% de la page en cours et non pas 100% de la taille de la fenêtre du navigateur, ceci afin d'éviter qu'au moindre ascenceur, la partie à scroller se retrouve sans background (puisque n'est pas étirée jusqu'en bas).

c'est bien ce qui se passe avec les modifications que je t'ai fournie

le fichier de test

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
html {
  min-height:100%;
}
body {
  min-height:100%;
  padding:0;
  margin:0;
  background-color:grey;
}
header {
  margin:0;
  width:100%;
  height:115px;
  border-top:3px white groove;
  background-color:#6f95bb;
}
/*represente la page invisible permettant d'ajuster les 2 pages: "page_avec_menu" et "page_sans_menu"(bordure bleu)*/
#page {
  position:relative; /* Ajout */
  margin:auto;
  width:980px;
  min-height:100%;
  border:3px blue inset;
}
 /* represente la page sans le menu*/
#page_sans_menu{
  position:relative;
  width:950px;
  min-height:100%;
  margin-top:0px;
  margin-left:30px;
  border:3px yellow inset;
  background-color:#f0f0f0;
}
 /*represente le menu vertical(bordure rouge)*/
#page_avec_menu{
  float:left;
  position:absolute;
  width:980px;
  min-height:100%;
  margin-top:0px;
  margin-left:0px;
  border:3px red inset;
  z-index:1;
}
.menu_vertical {
  width:168px;
/*  min-height:100%; /* Supprimé */
  min-height:90%;    /* Tiens compte du top:10% */
/*  margin-top:10%;  /* Supprimé */
  top:10%;           /* Remplace margin-top:10% */
  bottom:0;          /* Ajout */
  position:absolute; /* Ajout */
 
  border:1px #808080 outset;
  border-right:none;
  border-bottom:none;
  background-color:#f0f0f0;
  background-color:#FFFF99;
}
.menu_vertical ul {
  list-style-type:none;
}
.menu_vertical li {
  text-align:left;
  border-bottom:1px #808080 inset;
  padding-top:4px;
  padding-bottom:4px;
}
.preface {
  width:650px;
  height:325px;
  border:3px #808080 inset;
  margin-top:80px;
  margin-left:240px;
}
.preface_commentaire {
  position:relative;
  width:650px;
  height:325px;
  border:1px black solid;
  background-color:#f2f4f8;
  margin-top:20px;
  margin-left:244px;
  font-size:13px;
}
.commentaire {
  position:relative;
  width:650px;
  height:325px;
  border:1px black solid;
  margin-top:20px;
  margin-left:244px;
}
footer {
  position:relative;
  width:100%;
  height:150px;
  margin-top:50px;
  background-color:red;
  border: 1px #b0cbeb solid;
}</style>
</head>
<body>
<header>
</header>
<div id="page">
  <div id="page_avec_menu">
    <nav class="menu_vertical">
    <ul>
      <li><a href="#">lien1</a></li>
      <li><a href="#">lien2</a></li>
      <li><a href="#">lien3</a></li>
      <li><a href="#">lien4</a></li>
      <li><a href="#">lien5</a></li>
      <li><a href="#">lien6</a></li>
      <li><a href="#">lien7</a></li>
      <li><a href="#">lien8</a></li>
    </ul>
    </nav>
  </div>
  <div id="page_sans_menu">
    <section class="preface">
    </section>
    <section class="preface_commentaire">
    </section>
    <section class="commentaire">
    </section>
  </div>
</div>
<footer>
</footer>
</body>
</html>

je dois admettre que je ne saisi pas le HIC, sur quel navigateur testes tu?

impossible de mettre le div height 100% de la page

CSS

Vue hybride

Discussions similaires

Partager

Partager