Fixer un footer en bas de page quelle que soit la résolution

**Kalemiro** · 19/11/2014, 23h01

Bonsoir
J'ai un problème avec le footer de mon site web.
Suivant la résolution et le contenu de la page (du <main> ) il n'est pas au même endroit. Voici 2 exemples sur 2 pages différentes de mon site:

http://i.gyazo.com/fcdd346895bfc3f19a48af1b48882317.png

Ici sur une page peu rempli, le footer est suivant la résolution d'écran en plein milieu de la page (résolution: 1280*1024) le problème ne le fait pas avec du 1366*768

http://i.gyazo.com/6ceca7926cc27b749202b7f7c92e16dd.png

Et la pas de problème sauf si la résolution est vraiment élevé (la page scrollable)

Je précise être en HTML5, CSS3 et utiliser Bootstrap pour le positionnement.

Voici un condensé de mon code:

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
<body>
  <div class="container-fluid">
<footer class="row">
  <div class="col-xs-6 col-md-6">
      <p>
        Jean Valjean &amp; Gavroche
      </p>
  </div>
  <div class="col-xs-6 col-md-6">
    <div id="Copyright">
      <p>
        Copyright © 2014 WebAtHome - Tous Droits Réservés
      </p>
    </div>
  </div>
</footer>
</div>
</body>
</html>

et voici le css pour le footer:

Code :

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

1
2
3
4
5
6
footer{
  background-color: #34475E;
  color: white;
  position:absolute;
  width: 100%;
}

Voila, j'espère que mon post est compréhensible, nous avons beaucoup cherché mais jusqu'a présent aucune solution concluante.

Merci

bonne soirée

**JefReb** · 20/11/2014, 09h15

Si j'ai bien compris, il sufft d'utiliser une marge négative pour margin-top du footer. Cela permet de toujours placer le footer en bas de la page.

Code css :

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
#page {
   width: 53.33333333333333%;  /*Ideal sur écran 1920: 1024px -> 1024 / 1920  */
   height: auto;
   margin: 0 auto;
   border:1px solid red;
}
section            { width:100%;                         
                     min-height:300px;               /* avec un minimum en hauteur  */ 
                     margin:0 0 150px 0;             /* 150px en bas pour le footer */
					 padding:0;
					 border:1px solid blue;      		
					 }
footer             { width: 100%;  
                     height:20px;     
                     margin:-100px auto 0;         /* margin négatif */
					 border:1px solid green;
                   }

Code html:

Code html :

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

1
2
3
4
<div id="page">
   <section></section>
   <footer></footer>
</div>

voir l'exemple: http://codepen.io/JefReb/pen/WbbZad

**Bovino** · 20/11/2014, 09h18

Définir les propriétés bottom et height suffit :

Code :

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

1
2
3
4
5
6
7
8
footer{
  background-color: #34475E;
  color: white;
  position:absolute;
  width: 100%;
  bottom: 0;
  height: 1.5em;
}

**ryan** · 20/11/2014, 12h06

Yop

Envoyé par Bovino

Définir les propriétés bottom et height suffit :

Oui, sauf s'il y a beaucoup de contenu dans la page (assez que pour devoir scroller pour en voir la fin), le footer se retrouve en superposition du contenu, et il peut y avoir du contenu en-dessous du footer.

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
 
<!doctype html>
<html>
<head>
<title>Document sans nom</title>
<style>
#footer{
  background-color: #34475E;
  color: white;
  position:absolute;
  width: 100%;
  bottom: 0;
  height: 1.5em;
}
</style>
</head>
 <body style="margin: 0; padding: 0;">
 
	<div id="contenu">
		DEBUT 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/>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/>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/>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/>CONTENU<br/>CONTENU<br/>CONTENU<br/>CONTENU<br/>CONTENU
		<br/>FIN CONTENU
	</div>
 
	<div id="footer">
		FOOTER
	</div>
 
</body>
</html>

**Kalemiro** · 20/11/2014, 15h00

J'ai testé les 2 solutions.

Jefreb: Mettre la marge négative ne marche pas.

Bovino: Ta technique marche pour le "contact" mais sur une autre page avec plus de contenu (et donc devoir scroller) le footer reste bloqué au milieu de la page par dessus le texte (comme l'a dit ryan)

Je vous remercie de vous être penché sur mon problème, je vais continuer à réfléchir.

**ryan** · 20/11/2014, 15h03

Yop!

Si tu es prêt à utiliser javascript, et Jquery pour se simplifier la vie:

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
60
61
62
63
 
<!doctype html>
<html>
<head>
<title>Document sans nom</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#footer{
  background-color: #34475E;
  color: white;
  position:absolute;
  width: 100%;
  bottom: 0;
  height: 1.5em;
}
</style>
</head>
 <body style="margin: 0; padding: 0;">
 
	<div id="contenu">
		DEBUT 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/>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/>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/>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/>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/>CONTENU<br/>CONTENU<br/>CONTENU<br/>CONTENU<br/>CONTENU<br/>CONTENU		
		<br/>FIN CONTENU
	</div>
 
	<div id="footer">
		FOOTER
	</div>
 
	<script>
                $(document).ready( setfooter );
 
                $(window).resize(function() 
                {
                        setfooter(); 
                });
 
                function setfooter()
                {
                        if ( $(window).height() > $("#contenu").outerHeight( true ) )
                        {
                                footertop = $(window).height() - $("#footer").outerHeight( true );
                        }
                        else
                        {
                                footertop = $("#contenu").outerHeight( true );
                        }
                        
                        $("#footer").css('top', footertop + "px");
                }
 
        </script>
</body>
</html>

Fixer un footer en bas de page quelle que soit la résolution

CSS

Vue hybride

Discussions similaires

Partager

Partager