web-dev-qa-db-fra.com

Gardez le pied de page en bas de la page (avec défilement si nécessaire)

J'essaie de montrer un pied de page au bas de mes pages. Et si la page est plus longue que 1 écran, j'aime que le pied de page ne s'affiche qu'après avoir défilé vers le bas. Je ne peux donc pas utiliser 'position: fixed', car alors cela s'affichera toujours.

J'essaie de copier l'exemple suivant: http://peterned.home.xs4all.nl/examples/csslayout1.html

Cependant, lorsque j'utilise ce qui suit, le pied de page affiche à mi-chemin ma longue page pour une raison quelconque.

position: absolute; bottom:0

J'ai à la fois des pages courtes et des pages longues et j'aimerais que ce soit au bas des deux.

Comment puis-je également conserver le pied de page en bas sur une longue page?

Violon

J'ai créé ces violons pour montrer le problème et tester le code. Veuillez publier un exemple de travail avec votre solution.

Mon pied de page css: 

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }
htmlcssfooter
8
Paul

Je suggérerais l'approche du "pied de page collant". Voir le lien suivant:

http://css-tricks.com/snippets/css/sticky-footer/

10
scmccarthy22

Remplacer la hauteur par un débordement: auto; & donner au corps une position

html,body {
    position:relative; <!--Also give it a position -->
    margin:0;
    padding:0;
    overflow:auto; <!-- HERE -->
}

Positionnez le pied de page par rapport au corps

/* --- Footer --- */
.footerbar { 
    position: relative; <!-- HERE -->
    width: 100%;
    bottom: 0;
    color: white;
    background-color: #202020;
    font-size: 12px; 
}

Dans la mesure du possible, il est toujours préférable de positionner relativement vos éléments, en particulier vos éléments principaux, comme les pieds de page dans ce cas.

Modification d'une page courte

min-height:400px; <!-- Give this a real number like 400px 
                  or whatever you want...dont leave it to 100% as -->
}
3
Dustin Scott Garza

Nous luttons avec ce problème depuis un certain temps. Le div avec plusieurs div imbriqués couplé avec des hacks et des correctifs se transformait en cauchemar pour nous. Il y avait toujours des surprises qui nécessitaient plus de hacks et plus de correctifs. voici ce pour quoi nous nous sommes installés:

css:

html, body  {
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: #6f643a;
    font-family: Arial;
    font-size: 11pt; 
}

form {
   height: 100%;
}

corps:

<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0"  width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" align="center" >
         contents goes here
        </td>
    </tr>
    <tr>
        <td valign="top" bgcolor="gray" align="center" style="padding:20px">
            <font color="#FFFF00">copyright:Puppy</font>
            footer goes here
        </td>
    </tr>
</table>

C'est tout ce dont vous avez besoin. - si vous utilisez asp.net, n'ignorez pas la hauteur du formulaire.

0
Shankar

Nous avons maintenant une boîte flexible qui est très simple.

 body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

Remarque: nous ne devons contenir que deux div à l'intérieur du corps. Un pour le pied de page et un autre pour les objets de repos

0
deepak raghuwanshi

Il y a un excellent tutoriel de pied de page ici .

La page de démonstration est ici .

La prémisse de base est que la page principale du corps est étirée à 100% de la page. Avec une hauteur minimale de 100% aussi.

Le pied de page reçoit alors les règles suivantes:

.footerbar {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}
0
Parvez Rahaman
html,body {
    margin:0;
    padding:0;
    height:100%;
}
.content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footerbar {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

Si IE7

<!--[if lt IE 7]>
<style type="text/css">
    .content { height:100%; }
</style>
<![endif]-->
0
Parvez Rahaman