Un Footer me rends dingue...
Résolu
PrinceKreol
Messages postés
291
Date d'inscription
Statut
Membre
Dernière intervention
-
PrinceKreol Messages postés 291 Date d'inscription Statut Membre Dernière intervention -
PrinceKreol Messages postés 291 Date d'inscription Statut Membre Dernière intervention -
Hello,
J'ai un petit soucis concernant mon footer.
En effet, mon footer ne reste pas toujours en bas. Si la contenu (donc le body) est petit (genre 5 ligne) le footer monte et se retrouve au milieu de la page.
Quelqu'un à une idée afin de le fixer en bas ? J'ai essayé plusique manière dont une qui se mets en bas mais si la page est plus grand, le footer se trouve au milien.... ARRRRGGGG
Merci d'avance,
Meilleures salutations
Jonathan
J'ai un petit soucis concernant mon footer.
En effet, mon footer ne reste pas toujours en bas. Si la contenu (donc le body) est petit (genre 5 ligne) le footer monte et se retrouve au milieu de la page.
Quelqu'un à une idée afin de le fixer en bas ? J'ai essayé plusique manière dont une qui se mets en bas mais si la page est plus grand, le footer se trouve au milien.... ARRRRGGGG
Merci d'avance,
Meilleures salutations
Jonathan
A voir également:
- Un Footer me rends dingue...
- Comment dégonfler un ballon de foot - Forum Loisirs / Divertissements
- Creer un agenda de rendez vous - Guide
- Que signifie bp dans un classement de foot - Forum Loisirs / Divertissements
- Que veut dire db - Forum Réseaux sociaux
- Que signifient les abréviations ''bp'', '''bc'', ''db'' etc. au football ? ✓ - Forum Loisirs / Divertissements
6 réponses
Salut,
Essayes de mettre ton footer comme ca :
Mais c'est vrai qu'avec ton code sa serait mieux ! :)
Essayes de mettre ton footer comme ca :
.footer
{
position:absolute;
bottom:0px;
}
Mais c'est vrai qu'avec ton code sa serait mieux ! :)
Salut,
pour ton problème (comme je ne sais pas comment tu as fait ton code) tu peux essayé une solution en js.
admettons que le bloc qui est au dessus du footer (donc celui qu'on va agrandir pour caler le footer ) ai l'id "content" et que le footer ai une id "footer".
dans mon exemple je vais utilisé jquery
function auto_size_content()
{
content_h=$("#content").height(); //hauteur de "content"
footer_h=$("#footer").height(); //hauteur de "footer"
total_h=parseInt(content_h)+parseInt(footer_h); // hauteur de content+footer
ecran_h=screen.height; //hauteur de l'ecran ;
if (ecran_h>total_h) /*si hauteur de content+footer est plus petit que la hauteur de l'ecran*/
{
new_h= parseInt(ecran_h-footer_h); // on calcule la difference
$("#content").height( new_h); //et on donne la nouvelle hauteur de content;
}
}
note: tu peux réduire cette fonction la j'ai fait exprès de détailler.
genre direct mettre--> total_h =$("#content").height()+$("#footer").height();
pour ton problème (comme je ne sais pas comment tu as fait ton code) tu peux essayé une solution en js.
admettons que le bloc qui est au dessus du footer (donc celui qu'on va agrandir pour caler le footer ) ai l'id "content" et que le footer ai une id "footer".
dans mon exemple je vais utilisé jquery
function auto_size_content()
{
content_h=$("#content").height(); //hauteur de "content"
footer_h=$("#footer").height(); //hauteur de "footer"
total_h=parseInt(content_h)+parseInt(footer_h); // hauteur de content+footer
ecran_h=screen.height; //hauteur de l'ecran ;
if (ecran_h>total_h) /*si hauteur de content+footer est plus petit que la hauteur de l'ecran*/
{
new_h= parseInt(ecran_h-footer_h); // on calcule la difference
$("#content").height( new_h); //et on donne la nouvelle hauteur de content;
}
}
note: tu peux réduire cette fonction la j'ai fait exprès de détailler.
genre direct mettre--> total_h =$("#content").height()+$("#footer").height();
Voici mon code
<table id="footer"> <tr> <td id="footerG"> McDonald's Suisse </td> <td > <img src="..\pictures\LogoIT.jpg" class="BorderImages" usemap="#Map"> <map name="Map"> <area shape="circle" coords="100,28,25" href="..\web\home.php?Page=Login"> </map> </td> <td id="footerD"> </td> </tr> </table> </body> </html>
#footer
{
text-align:center;
margin-top:10px;
bottom:0;
left:0;
width:100%;
height:50px;
}
#footerG
{
text-align:left;
}
#footerD
{
text-align:right;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour,
rajouter ce javascript:
et pour le footer:
<footer id="footer">.....pied de page</footer>
rajouter ce javascript:
<script src="js/setFooter.js">
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var articleHeight = document.getElementsByTagName("article")[0].offsetHeight;
var headerHeight = document.getElementsByTagName("header")[0].offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
footerElement.style.top = (articleHeight + headerHeight + footerHeight) + 'px';
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
</script>
et pour le footer:
<footer id="footer">.....pied de page</footer>
Y'aurais pas un moyen sans Javascript ?
Même si l'idée me plait, mais mon cahier des charges me l'interdis
Même si l'idée me plait, mais mon cahier des charges me l'interdis
tu peux le faire avec l'attribut min-height ( https://www.zonecss.fr/proprietes-css/min-height-css.html ) mais ie va te faire des misères !
sinon tu peux essayé en mode "responsive" et utilisé des media queries -->
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
( mais bon pas compatible avec ie7 et 8)....
donc il y'a bien d'autre moyen ! mais niveau compatibilité... le js serai plus sur !
sinon tu peux essayé en mode "responsive" et utilisé des media queries -->
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
( mais bon pas compatible avec ie7 et 8)....
donc il y'a bien d'autre moyen ! mais niveau compatibilité... le js serai plus sur !