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 un screeshot (ci-joint) de l'espace blanc avant le footer (le footer c'est la barre où il y a marqué "copyright").
Et voici les codes html et css.
Structure html :
CSS :
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
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 un screeshot (ci-joint) de l'espace blanc avant le footer (le footer c'est la barre où il y a marqué "copyright").
Et voici les codes html et css.
Structure html :
<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 :
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