impossible de mettre le div height 100% de la page
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:
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:
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.
