hauteur div (100%) + scroll

**manutudescends** · 15/10/2007, 21h43

Bonjour,
j'ai fait une petite page de test pour vous exposer mon problème.

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
113
114
115
116
117
118
119
120
121
122
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
 
html,body{
	background:#b1b163;
	color:#666633;
	height: 100%
	text-align:center;
	/*overflow: hidden;*/
}
 
#content{
	background:#e2e2c7;
	width:760px;
	margin-top:40px;
	margin-bottom:40px;
	padding:0px;
	height:100%;
	overflow:auto;
 
}
 
#center{
	background:#e2e2c7;
	margin:auto;
	text-align:left;
	width:760px;
 
	height:100%;
}
 
#header{
	background:black;
	position:absolute;
	text-align:center;
	top:0px;
	width:760px;
	height:40px;
}
 
#footer{
	background:black;
	position:absolute;
	text-align:center;
	bottom:0px;
	width:760px;
	height:40px;
}
</style>
</head>
<body>
<div id="center">
	<div id="header">
		header
	</div>
	<div id="content">	
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
		contentontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentontentcontentcontent
	</div>
	<div id="footer">
		footer
	</div>
</div>
 
</body>
</html>

J'aimerai que le content s'étire pour occuper la taille de l'écran en hauteur ( moins header et footer bien sur). Et si le contenu dépasse, une scroll apparait.
Si qq sait comment faire ca

Merci

**onirisme** · 16/10/2007, 08h14

Mets ton #footer en position relative.

Un bloc en position relative reste dans le flux normal, c'est à dire qu'il suivra l'ordre que tu as défini dans ton code

Code :

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

1
2
3
4
 
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

**manutudescends** · 16/10/2007, 09h17

oui mais ca n'est pas ce que je veux. Je veux un footer qui soit tout le temps en bas de page visible à l'écran.
En fait je ne veux aucun scroll a l'écran sauf dans le content.

**onirisme** · 16/10/2007, 09h30

Ok, dans ce cas regarde ce thread -> http://www.developpez.net/forums/sho...d.php?t=413494

Et l'exemple de Bisûnûrs -> ICI

**manutudescends** · 16/10/2007, 19h48

Merci, je suis arrivé à ce que je voulais.

hauteur div (100%) + scroll

Défilement en CSS

Discussions similaires

Partager

Partager