Page "pleine" sur les navigateurs

**Kamoo** · 24/05/2012, 12h13

Bonjour,

Je débute en développement web et tente de développer un site simple avec HTML/CSS.

J'ai un petit problème concernant l'affichage selon les pages. Voici comment sont organisées mes pages en gros.

Code :

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

1
2
3
4
5
6
7
8
9
_____________
|   header    
-------------
|                 
|   contenu   
|                 
-------------
|   footer      
|------------

Mon problème est que sur certaines pages le contenu est vraiment court (2-3 lignes). Sur ces pages un espace blanc apparait en dessous du footer. Le header et le footer ont des tailles fixes mais je n'ai rien attribué pour le contenu. J'aimerais que la partie contenu occupe toute la place entre le header et le footer de façon à ce que le header soit toujours collé en haut de la page et le footer en bas.

Que me conseillez vous de faire pour arriver à mes fins?

Merci bien.

**elfamine** · 24/05/2012, 12h38

Bonjour,

peut etre l'utilisation de la propriété min-height

Code :

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

1
2
3
#content{
...
min-height:une valeur;}

ou alors jouer sur les margin

Code :

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

1
2
3
#content{
...
margin-bottom: 0;}

sans le code de ta page on ne peut faire que des hypothèses

**Kamoo** · 24/05/2012, 14h07

Mon html:

Code :

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

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

Mon CSS:

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
 
#header{
width:100%;
height:200px;
background-color:blue;
}
#footer{
width:100%;
height:150px;
background-color:green;
}
#content{
width:100%;
background-color:red;
}

Merci pour votre aide

**elfamine** · 24/05/2012, 19h20

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
/*On va effectuer un "petit" reset*/
body,
div,
p{
	margin: 0; padding: 0;}
 
#header{
	width:100%; /* c'est pas utile et ca peut meme causer des problemes */
	height:200px;
	background-color:blue;
	margin-bottom: 0;}
#footer{
	width:100%;
	height:150px;
	background-color:green;}
#content{
	width:100%;
	background-color:red;
	min-height: 300px; /* Optionnel : si tu souhaite que la div content ai au minimum une certaine hauteur */}

l'html pout le test :

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
<!DOCTYPE html>
 
<html>
 
<head>
 
<title>page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
 
</head>
 
<body>
<div id="header"></div>
<div id="content">
	<p>ligne 1</p>
	<p>ligne 2</p>
</div>
<div id="footer"></div>
 
</body>
 
</html>

**NoSmoking** · 25/05/2012, 13h47

Bonjour,
il existe plusieurs méthodes pour arriver à cette fin, je t'en livre une déjà fournie sur ce forum me semble t-il

structure document

Code html :

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

1
2
3
4
5
6
7
8
<div id="page">
  <div id="entete">
  </div>
  <div id="contenu">
  </div>
</div>
<div id="footer">
</div>

style document

Code css :

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

1
2
3
4
5
html, body {
  height : 100%;
  margin : 0;
  padding :0;
}

style page

Code css :

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

1
2
3
#page {
  min-height : 100%;
}

- si cela doit être utilisé sous IE6 il faut mettre un "hack"

Code :

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

1
2
3
4
5
6
7
<!--[if IE 6]>
<style type="text/css">
#page {
  height : 100%;
}
</style>
<![endif]-->

style footer

Code css :

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

1
2
3
4
5
#footer{
  margin-top : -50px;     /* - hauteur pied de page */
  height : 50px;
  overflow:hidden;
}

- la hauteur de 50px est fixée arbitrairement, à ajuster donc.

style contenu

Code css :

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

1
2
3
4
#contenu{
  padding-bottom : 50px;  /* hauteur pied de page */
  overflow : hidden;
}

- le padding-bottom est fixé à la MEME valeur que la hauteur du footer

Voila pour le minimum à avoir sur la page.

L'exemple complet, essaies en rajoutant du contenu...

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
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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[CSS] FOOTER en bas de page...</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding :0;
  font-family : Verdana;
  font-size : 1em;
  background-color : #f8f8f8;
}
h1 {
  margin : 0;
  color: #6699CC;
  font-size : 2.0em;
}
h1 img{
  vertical-align : middle;
}
#page {
  min-height : 100%;
}
#entete{
  height : 90px;
  padding:5px;
  background-color : #e1e1e2;
  overflow:hidden;
}
#footer{
  margin-top : -50px;     /* - hauteur pied de page */
  height : 50px;
  background-color : #e1e1e2;
  overflow:hidden;
}
#contenu{
  padding-bottom : 50px;  /* hauteur pied de page */
  overflow : hidden;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="page">
  <div id="entete">
    <h1><img src="http://www.developpez.net/template/images/logo.png" alt="www.developpez.net">
    CSS FOOTER en bas de page...</h1>
  </div>
  <div id="contenu">Corps de page
  </div>
</div>
<div id="footer">Footer
</div>
</body>
</html>

**Kamoo** · 29/05/2012, 09h04

Merci à tous pour vos réponses elles m'ont été très utiles.

**guitz** · 20/10/2012, 22h44

Bonjour,

Savez vous s'il est possible de mettre en place ce footer fixé en bas de fenêtre avec une hauteur de footer mettons de 20% la hauteur de fenêtre, un contenu de hauteur 60% et un header de 20% ?

En fait l'idée cest de garder ce footer collé en bas avec un webdesign qui reste proportionnel quel que soit la résolution d'écran.

Merci

**NoSmoking** · 22/10/2012, 19h01

Envoyé par guitz

Savez vous s'il est possible de mettre en place ce footer fixé en bas de fenêtre avec une hauteur de footer mettons de 20% la hauteur de fenêtre, un contenu de hauteur 60% et un header de 20% ?

En fait l'idée cest de garder ce footer collé en bas avec un webdesign qui reste proportionnel quel que soit la résolution d'écran.

il te suffit de remplacer les hauteurs en px par des hauteurs en %.

Réflexion : est ce bien intéressant de fixer en % la hauteur du footer, voire du header, le rendu peut devenir vite très sale, attendu que son contenu est la plupart du temps figé ?

Page "pleine" sur les navigateurs

CSS

Partager

Partager