[CSS] Espace blanc au dessus du footer

**arbilus** · 05/07/2017, 23h20

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 : 708
Taille : 179,4 Ko

Nom : img1.png
Affichages : 708
Taille : 179,4 Ko

-> Avec l'espace au dessus du footer (vu en plein écran) :
Nom : img2.png
Affichages : 712
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

**toulousain3117** · 06/07/2017, 12h41

bonjour

tu as essayer d'inspecté l'élément pour voir la zone concerné et donc la parti du css à réctifier ?

**Michel** · 06/07/2017, 13h30

pour moi, le problème vient de la hauteur des tableaux.
De plus, je considère qu'utiliser des tableaux pour faire une mise en page est assez catastrophique !

**arbilus** · 07/07/2017, 01h44

Hello. Merci pour vos réponses.

J'ai oublié de préciser que l'espace blanc avant le footer était aussi visible même sans être en plein écran sur certaines pages où le contenu n'était pas assez "long".

Mais j'ai inspecté les éléments comme tu me la conseillé et j'ai fini par résoudre, en partie, le problème.

Déjà j'ai remplacé la mise en page du site via un tableau (pas très propre comme Michel l'a spécifié...) par du html5 avec des balises aside et main en utilisant ces codes en css :

Pour la balise main (mon contenu principal, situé au milieu) :

Code :

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

1
2
3
4
5
6
7
8
9
.content{
display: block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
background-color:#FBFBFB;
vertical-align:top;
}

Et pour les balises aside (mes sidebars sur les côtés gauche et droit) :

Code :

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

1
2
3
4
.space_vertical_banner{
width: 15%;
text-align: center;
}

Et là ça a commencé à être plus clair. J'ai ensuite utilisé la balise <footer> (html5 également) pour mon footer et je n'ai plus d'espace blanc au dessus du footer en dehors du mode plein écran, enfin !

Par contre un nouveau problème est apparu en plein écran maintenant. Quand ma page n'a pas un contenu assez "long", mon footer remonte et il y a un espace blanc qui se créé après celui-ci.. Un détail peut-être. Mais ça montre que mon code n'est pas encore complètement propre.

Vous avez une idée de comment arranger ça ?

Invité · 07/07/2017, 08h51

Bonjour,

si tu veux de l'aide, il faut montrer le code CSS, ET le code HTML associé.

**NoSmoking** · 08/07/2017, 08h26

Bonjour,

Quand ma page n'a pas un contenu assez "long", mon footer remonte ...

parmi les solutions existantes il en est une donnée dans cette discussion : https://www.developpez.net/forums/d1...s/#post6704356.

**arbilus** · 11/07/2017, 02h04

Salut. Merci pour les solutions proposées mais j'ai trouvé mon bonheur pour ce dernier problème en appliquant la dernier solution proposée ici : https://www.emmanuelbeziat.com/blog/...ur-disponible/

Merci encore pour votre aide !

[CSS] Espace blanc au dessus du footer

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager