le footer ne se positionne plus si je donne une hauteur au body

**hukiro** · 12/05/2013, 03h46

Salut à tous, dans ce script le footer ne veut pas se placer à cause de la propriété CSS height du body, si on la supprime ça fonctionne

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
<!DOCTYPE>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			/*	Header	*/
			#header
			{
				position: relative;
				width: 100%;
				background: #181818;
				color: #ffffff;
			}
			/*	Main	*/
			#main
			{
				position: relative;
				width: 100%;
				background-color: white;
				overflow: hidden;
				padding: 0;
				margin-bottom: 25px;
			}
			/*	Footer	*/
			#footer
			{
				width: 100%;
				background-color: #2D2D2D;
				color: white;
				bottom: 0;
			}
			/*	Body	*/
			body
			{
				height: 1500px;
			}
		</style>
		<script>
			window.onload = function()
			{
				function placer_footer()
				{
					document.getElementById('footer').style.position = 'static';
 
					if(typeof(window.innerHeight)=='number')
					{
						var tailleY_fenetre = window.innerHeight;
					}
					else if(document.documentElement.clientHeight != undefined) //IE6
					{
						var tailleY_fenetre = document.documentElement.clientHeight;
					}
					if(tailleY_fenetre > document.body.offsetHeight)
					{
						document.getElementById('footer').style.position = 'absolute';
					}
					window.onresize = function()
					{
						placer_footer();
					}
				}
				placer_footer();
			}
		</script
	</head>
	<body>
		<div id="header">
			Header
		</div>
 
		<div id="main">
			<p>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu <br/>
				Contenu Contenu Contenu Contenu <br/> Contenu Contenu Contenu Contenu
			</p>
		</div>
 
		<div id="footer">
			Footer
		</div>
	</body>
</html>

**SpaceFrog** · 12/05/2013, 08h46

JavaScript n'est pas en cause c'est du CSS ...

le footer ne se positionne plus si je donne une hauteur au body

Positionnement en CSS

Discussions similaires

Partager

Partager