Salut à tous,

J'ai un soucis avec mon code. J'ai remarqué qu'il y a un problème au niveau du footer. Quand je me met en plein écran sur mon pc je peux voir un espace blanc au dessus du footer.

C'est comme si il y avait un espace (non identifié :/) entre le footer et le contenu au dessus.


J'ai fait quelques screenshot pour vous montrez ce que ça donne avec et sans cet espace blanc avant le footer.

-> Sans l'espace au dessus du footer (vu en mode normal : pas en plein écran) :
Nom : img1.png Affichages : 767 Taille : 179,4 Ko


-> Avec l'espace au dessus du footer (vu en plein écran) :
Nom : img2.png Affichages : 773 Taille : 40,6 Ko


Et voici les codes html et css.


Structure html :
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
<head></head>
 
<body id="body">
 
	<div class="bloc-principal">
 
		<div id="header"></div>
 
		<table id="background_content">
		<tbody>
			<tr id="content_and_ad">
				<td id = "space_vertical_banner1"></td> -> Bannière latérale 1
				<td id = "content"></td> -> Contenu situé au milieu
				<td id = "space_vertical_banner2"></td>
			</tr>
		</tbody>
		</table>
 
	</div>
 
	<div class="footer">
		<table style="border-style: solid none none; text-align: center; width: 100%;" border="1" cellpadding="2" cellspacing="2">
			<tbody>
			<tr>
				<td id="tab_footer"></td>
				<td id="tab_footer">Copyright 2015 - ...</td>
				<td style="border-style: none;"></td>
			</tr>
			</tbody>
		</table>
	</div>
 
</body>


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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	body{
		background-color:#FBFBFB;
		margin: 0;
	}
 
	.bloc-principal {
		min-height: calc(100vh - 10px);
	}
 
	#background_content{
		background-image:url(../img/weather.png);
		width: 100%;
	}
 
	#content{
		width: 70%;
		background-color:#FBFBFB;
		vertical-align:top;
	}
 
	#space_vertical_banner1{
		width: 15%;
		text-align: center;
	}
 
	#space_vertical_banner2{
		width: 15%;
		text-align: center;
	}
 
	.footer{
		left: 0;
		right: 0;
	}

Comme vous pouvez le voir, pour créer mon footer j'ai utilisé la méthode "min-height: calc(100vh - 10px);" dans ma div contenant le contenu intégrale de ma page ("id : bloc_principal") + margin: 0 sur le body. Cependant cet espace blanc qui s'affiche avant le footer quand je change la taille de l'écran me montre qu'il y a un soucis visiblement dans mon code... Et je ne vois pas lequel malgré pas mal de tests. Des idées ?

Encore merci pour votre aide