Le pied de page ne colle pas au fond même si je l'ai codé
https://stackoverflow.com/questions/411228
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai supprimé le pied de page pour le moment, le site devait être en ligne. Le lien a donc également disparu.
Comme vous pouvez le constater (dans FF2 comme dans IE7), le pied de page se trouve au bas de l'ECRAN, mais pas au bas de la page (contenu).
J'ai ceci dans mon code:
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
et ceci dans le css:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px; /* height of the footer */
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
margin: 0;
}
Ou, bref, j'ai suivi les instructions ici .
La solution
Bien, avec la taille # à l'intérieur du 100%, retirez le rembourrage et ajoutez ce qui suit au #content
overflow:auto;
padding-bottom:30px;
alors votre lien fonctionne pour moi en FF
Autres conseils
Vous n'avez pas suivi vos instructions avec suffisamment d'attention. La clé pour la mise en page de Matthew
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
est que le conteneur a une position: relative tandis que le pied de page a une position: absolue. Cela place l'un dans l'autre. Notez que le conteneur a un espace réservé au pied de page en réservant padding-bottom de la taille du pied de page. La mise en page ne fonctionne donc que lorsque la hauteur du pied de page est fixée.
Absolument positionné avec botttom: 0, l'élément se placera au bas du parent le plus proche positionné. S'il n'y en a pas, la fenêtre d'affichage est utilisée à la place, et c'est ce qui se passe dans votre présentation.
Votre note de bas de page n'est pas un enfant de votre part.
Pourquoi pas celui-ci ?
Déplacez le rembourrage du bas du corps vers le bas du #wrap. Votre pied de page est toujours situé à 30 pixels du bas de la "page". à cause de ce rembourrage. En le mettant sur le #wrap, vous éviterez que le contenu de #wrap ne passe derrière votre pied de page.
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
}
</style>
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Cela a fonctionné pour moi.
IMO, le piratage étoile IE pose le problème. Essayez de changer les hacks IE avec:
*html #wrap {
...
}
Il y a une assez bonne technique de démonstration sur ce site: http: //www.themaninblue. com / experiment / footerStickAlt /
Il doit y avoir autre chose à ce sujet, chaque méthode décrite ci-dessus fonctionne sur des sites différents, mais pas sur le mien.
Ceci est ma source de page, les éléments non pertinents sont supprimés (contenu et autres éléments):
<body>
<div id="size"> javascript textsize modifier</div>
<div id="wrap">
<div id="top"> logoimage
<div id="menu">
<div id="menuwrapper">
<ul id="primary-nav">
<li> Homelink </li>
<li class="menuactive menuparent" class="over"> Link 2
<ul>
<li> Sublink 1 </li>
<!-- etcetera //-->
</ul>
</li>
<li class="menuparent" class="over"> Active Link 3
<ul>
<li> Sublink 1</li>
<!-- etcetera //-->
</ul>
</li>
</ul>
</div> <!-- end menuwrapper //-->
</div> <!-- end menu //-->
</div> <!-- end top //-->
<div id="content">
<div id="newssnippet"></div>
<div id="roundedright"> <!-- rounded corners //-->
<!-- 6 divs to create rounded corners //-->
<div id="right">Random main content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
<div id="logo">Another logo</div>
<div id="roundedleft"> <!-- rounded corners again //-->
<!-- 6 divs to create rounded corners //-->
<div id="left">News content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
</div> <!-- end content //-->
<div id="footer"></div>
</div><!-- end wrap //-->
</body>
Il est clair que je suis la mise en page prescrite dans la lien dans le message d'ouverture .
Ensuite, dans le CSS, j'ai:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: .8em;
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
min-height:100%;
}
*html #wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: transparent url(images/cms/footer.png) no-repeat bottom center;
padding: 0;
}
#footer p {
margin: 0;
padding: 0;
padding-top: .7em;
text-align: center;
}
#footer a {
text-decoration: none;
}
Cela devrait être chaque bit pertinent ...
Qu'est-ce qui me manque?
Pour mémoire, le pied de page reste au bon endroit si le contenu est inférieur à 100%. Donc, s'il ne remplit pas l'écran.
Le pied de page se situe quelque part à mi-chemin du contenu si celui-ci représente plus de 100% de la page. Par conséquent, lorsque je dois faire défiler l'écran pour tout afficher
