Height 100% = Viewport + Bannière

[Tobear91]

Bonjour à tous,

Voilà j'ai un tout petit soucis de hauteur, je vous rassure tout de suite mon Footer se porte à merveille en bas de ma page

C'est juste au niveau de mon content, je lui met une image de fond qui répète en hauteur je lui donne donc la propriété height : 100%. Donc logiquement je vais devoir scroller ma page car j'ai ma bannière qui prend de la place en hauteur.

Ce que je veux c'est que si j'ai ma page de vide ou bien que le contenu n'aille pas jusqu'en bas, je ne voudrais pas devoir scroller !

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="all">
    <div id="header">
    	<div id="logo">
        </div>
    </div>
 
    <div id="content">        
        <div id="footer">
        </div>
    </div>  
</div>

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
@charset "utf-8";
/* CSS Document */
 
/* All */
*{margin: 0; padding: 0}
 
html, body {
	width: 100%;
	height: 100%;
}
 
#all {
	width: 100%;
	height: 100%;
	margin: auto;
}
 
/* Header */
#header {
	min-width: 1000px;
	height: 175px;
	background: url(../images/bg_header.png) repeat-x;
	position: relative;
	top: -5px;
}
 
/* Logo */
#logo {
	width: 500px;
	height: 100%;
	float: left;
	background: url(../images/logo.png) no-repeat;
}
 
/* Corps */
#content {
	width: 1000px;
	min-height: 100%;
	height: 100%;
	margin: auto;
	background: url(../images/bg_content.png) repeat-y;
	position: relative;
	top: -5px;
}
 
/* Footer */
#footer {
	width: 100%;
	height: 30px;
	background-color: #0066FF;
	position: absolute;
	bottom: 0;
}

erreur.png

Voilà, j'espère avoir été clair. Merci de votre aide

[NoSmoking]

Bonjour,
voir peut être ce post Hauteur de page à 100% une partie de la structure devrait t'intéresser.