Hauteur div 100% de l'espace restant dans la page

jimmyneutron · 13/10/2011, 02h01

Bonjour,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
html, body
{
    margin:0px;
    height:100%;
 
}
#center
{
    margin-left:auto;
    margin-right:auto;
    width:1000px;
}
</style>

Code :

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

1
2
3
4
<body>
<div id="center"></div>
<div id="footer"></div>
</body>

Comment faire pour avoir un pied de page remplissant l'ensemble de l'espace restant sous le premier DIV jusqu'au bas de la page ?
Autant en largeur qu'en hauteur ...

J'ai essayé plusieurs choses vues sur d'autres sites ... sans succès.

Merci pour votre aide.

NoSmoking · 13/10/2011, 18h24

Bonjour,
un petit tour du coté de http://css.developpez.com/galerie/?page=mise-en-page...

jimmyneutron · 13/10/2011, 18h28

Citation:

Envoyé par NoSmoking

Bonjour,
un petit tour du coté de http://css.developpez.com/galerie/?page=mise-en-page...

Merci pour l'info mais c'est du super basique et aucun de ces exemples ne correspond à mon cas.

NoSmoking · 13/10/2011, 22h16

ce n'est pas habituel de vouloir que le footer occupe la place restante, en règle générale ce le conteneur que l'on veut étirer jusqu'en bas.

Tu peux ruser en mettant le conteneur à 100% de la hauteur et ta DIV centre à l'intérieure.
exemple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding :0;
  font-family : Verdana;
  font-size : 1em;
}
#page{
  margin-left : auto;
  margin-right : auto;
  background-color : #d0d0d0;
  min-height : 100%;
  width : 1000px;
}
#centre{
  background-color : #f0f0f0;
  padding : 20px;
}
</style>
</head>
<body>
<div id="page">
  <div id="centre">
  Texte dans zone centrale<br>
    <ol>
      <li>Titre
        <p>Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p>
      </li>
      <li>Titre
        <p>Antequam in provincia toto fuerit pervenire denique provincia nascetur antequam.</p>
      </li>
    </ol>
  </div>
  Le pseudo Footer...
</div>
</body>
</html>

jimmyneutron · 13/10/2011, 22h42

Citation:

ce n'est pas habituel de vouloir que le footer occupe la place restante

Si le DIV du dessus est court (infèrieur à la hauteur de la fenêtre), le DIV "footer" n'ira pas jusqu'au bas de la page. C'est ce que je cherche à faire.

Ta solution fonctionne pour étirer verticalement, mais ne permet pas de prendre 100% de la largeur de la fenêtre.

NoSmoking · 13/10/2011, 22h51

il suffit d'adapter le CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#page{
  background-color : #d0d0d0;
  min-height : 100%;
  min-width : 1000px;
}
#centre{
  background-color : #f0f0f0;
  margin-left : auto;
  margin-right : auto;
  width : 1000px;
}

Candygirl · 15/10/2011, 11h22

Hello,

Citation:

Envoyé par jimmyneutron

J'ai essayé plusieurs choses vues sur d'autres sites ... sans succès.

Quelles choses ? Quel site a un footer correspondant à ce que tu souhaites ?

Cette solution "en trompe-l’œil" pourrait-elle convenir?

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>big footer</title>
 
	<style type="text/css">
		body {
		  background:#999;
		  margin:0;padding:0;
		}
 
		#page{
		  background:#ccc;
		}
		#centre{
		  width:960px;
		  margin:0 auto;
		  background:#FFF;
		}
	</style>
</head>
<body>
	<div id="page">
	  <div id="centre">
		contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>
	  </div>
	</div>
	<div id="footer">
	  footer
	</div>
</body>
</html>

Autrement pour tous les navigateurs récents (IE8 et +) tu peux utiliser un display:table pour utiliser réellement l'espace à disposition, mais il faut des conditions bien particulières pour que cela s'avère vraiment nécessaire:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>big footer</title>
 
	<style type="text/css">
		html,body {
		height:100%;
		}
 
		body {
		  background:#ccc;
		  margin:0;padding:0;
		}
 
		#page{
		  display:table;
		  width:100%;
		  height:100%;
		}
		#contenu,#footer{
		  display:table-row;
		}
 
		#centre {
			width:760px;
			margin:0 auto;
			background:#FFF;
		}
 
		#footer {
			height:100%;
			background:#999;
		}
	</style>
</head>
<body>
	<div id="page">
		<div id="centenu">
			<div id="centre">
			  contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>contenu <br>
			</div>
		</div>
		<div id="footer">
		  footer
		</div>
	</div>
</body>
</html>

13/10/2011, 18h24	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, un petit tour du coté de http://css.developpez.com/galerie/?page=mise-en-page...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email