Hauteur responsive design
Bonjour,
J'aimerais faire ma page avec un hauteur responsive:
voila mon 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
| <!DOCTYPE html >
<html>
<head>
<title>Test</title>
<link href="test.css" rel="stylesheet">
</head>
<body>
<div class="left">
<div class="left1">
gauche haut
</div>
<div class="left2">
gauche bas
</div>
</div>
<div class="milieu">
milieu
</div>
<div class="right">
à droite
</div>
</body>
</html> |
et le code CSS est celle ci:
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
| body{
width: 100%;
height: 700%;
display: inline-block;
margin: 0 auto;
}
.left{
width: 15%;
height: 600px;
display: inline-block;
}
je veux le bloc
.left1{
height: 500px;
background-color: blue;
}
.left2{
height: 100px;
background-color: black;
}
.milieu{
width: 60%;
height: 600px;
display: inline-block;
background-color: red;
vertical-align: top;
}
.right{
width: 20%;
height: 600px;
display: inline-block;
background-color: green;
vertical-align: top;
} |
je veux que le bloc "left2" est toujours en bas de la page et je fais pas dans laquel dans ce page un défilement quelque soit l'hauteur de l'ecran.
