J'ai la page suivante ( http://www.workingstorage.com/Sample.htm ) qui a un pied de page que je ne peux pas faire asseoir au bas de la page.
Le CSS est hérité et m'embrouille; Je ne peux pas sembler le changer correctement pour mettre une hauteur minimum sur le contenu ou faire le pied de page aller au fond.
J'ai développé une méthode assez simple pour coller le pied de page en bas, mais comme la plupart des méthodes courantes, vous devrez le modifier pour l'adapter à la taille de votre pied de page.
<body>
<header></header>
<article></article>
<footer></footer>
</body>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
body:after {
content: '';
display: block;
height: 100px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
Il y a un excellent tutoriel de bas de page ici .
La page de démonstration est ici .
La prémisse de base est que la page principale du corps est étendue à 100% de la page. Avec une hauteur minimale de 100% aussi.
Le pied de page reçoit alors les règles suivantes:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
Une approche très simple qui fonctionne super cross browser est la suivante:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Ceci est connu comme un pied de page collant. Une recherche google lui arrive avec beaucoup de résultats. Un CSS Sticky Footer est celui que j'ai utilisé avec succès. Mais il y en a plus.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
