Hauteur responsive design

**fidbell84** · 30/06/2015, 14h42

Bonjour,

J'aimerais faire ma page avec un hauteur responsive:

voila mon 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
<!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 :

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
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.

**nef1912** · 01/07/2015, 11h05

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.

J'ai pas compris.

Par contre si tu veux placer ton .left2 en bas de page, tu peux jouer là-dessus avec une éventuelle largeur :

Code :

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

1
2
3
4
5
6
7
 
.left2{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0;
}

Et si tu veux le bloquer en bas de page lors du scroll, change de propriété position.

Invité · 01/07/2015, 14h38

Bonjour,

Envoyé par fidbell84

J'aimerais faire ma page avec un hauteur responsive:

Et ça veut dire quoi, selon toi, "hauteur responsive" ?

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.

Il manque des mots ?? la ponctuation ??

On ne comprend pas.

Écris des phrases CLAIRES : "sujet - verbe - complément".
Une phrase par ligne.

**fidbell84** · 06/07/2015, 11h35

on ne peux pas détecter la taille d'ecran alors j'ai pas mis de hauteur

**nef1912** · 06/07/2015, 11h39

on ne peux pas détecter la taille d'ecran

Première nouvelle.

Hauteur responsive design

Responsive design en CSS

Discussions similaires

Partager

Partager