Comment positionner un pied de page/de l'élément par rapport au bas de la page?

Je suis en train de position de mon pied de page en bas de la page, mais avec peu de succès.

Je ne peux coller le lien car il y a beaucoup de CSS là-bas et je ne sais pas où est mon problème.

C'est donc le lien: Test ; Si quelqu'un veut m'aider je vous en serais reconnaissant.

MODIFIER: La question est ancienne et l'url n'est plus là, mais la réponse peut être considérée comme valide de toute façon, quand un individu a besoin pour la position d'un pied de page (ou tout autre élément) au bas de la page (appelée collant pied de page).

  • Script: raw.github.com/chaoscod3r/less.js/master/dist/... , Firefox s'est écrasé, m'a demandé d'arrêter le dit script.
  • Il y a une solution de repli pour que, à la charge localement. Essayer dans quelques minutes, mon serveur pourrait agir comme je viens de téléchargé les fichiers.
  • C'est un bon exemple de pourquoi toutes les informations pertinentes devraient être inclus dans la question, pas référencés par des liens. Oui, les réponses pourraient être utiles, mais la question est très vague. Si vous modifiez la question de le rendre plus significatif, je vais vous donner une réouverture de vote.
InformationsquelleAutor Roland | 2012-05-06
  1. 6

    J'ai effectivement utilisé cette solution dernièrement. Il fonctionne très bien. Et si vous avez du contenu dynamique à l'intérieur du pied de page vous pouvez facilement faire un script qui sur le redimensionner ou le changement d'orientation de modifier la hauteur du pied de page et la marge sur le corps.

    html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px; //same height as the margin to the bottom of the body
}
    • Notez que votre question a été piraté par quelqu'un d'autre en le transformant en une chose totalement différente. Depuis, j'ai renversé la changer car elle n'a pas été faite de bonne foi. Vous pouvez préciser si votre réponse s'applique à la question d'origine ainsi.
    • J'ai remarqué que, mais je ne pouvais pas comprendre comment il/elle a fait ça, ni moi, ne pouvait revenir en arrière ou de refuser son/le sien changements. Merci pour le faire 🙂
    InformationsquelleAutor Roland
  2. 2
    #footer {
      margin-top: -50px;
}

    De le supprimer à partir de #footer {} définition. Aussi, puisque vous le voulez proche, vous aurez à augmenter la hauteur de la div au-dessus du pied de page, jusqu'à ce qu'il atteigne la fin de l'écran. Sinon, vous devrez utiliser le positionnement absolu.

    Edit : suppression de "position: relative" de l' #pied de page

    Edit 2: Affichage de toutes les définitions que je vois sur firebug.

    footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    clear: both;
    height: 50px;
    position: relative;
    width: 100%;
}

footer {
    background-image: url("http://rolandgroza.com/projects/roland/assets/less/../gfx/background-light.png");
    background-position: center center;
    background-repeat: repeat;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

footer {
    display: block;
}

    Et vous pouvez les supprimer de la 1ère série de définitions et la dernière avec "display:block" . Si vous pouvez les trouver quelque part.

    • Même chose, je ne pense pas que c'est à cause de ça
    • également supprimer "position: relative" de l' #pied de page. Avec ces 2 changements je l'ai dit, le pied de page est allé droit. [testé à l'aide de firebug]
    • Je ne vois pas pourquoi la suppression de la position: relative; serait-il fixer 🙂 il suffit de prendre un coup d'oeil à cet article : ryanfait.com/sticky-footer.
    • Ok, je vois pourquoi il travaille. vous avez 2 #pied de page de la définition et de la "position: relative" on prend les plus prioritaires. Lorsque vous désactivez le "position: absolute; bottom: 0" est appliqué. La première définition à la ligne 2581 et de la 2e à la ligne 3119
    • Je suis en utilisant les media queries, peut-être que c'est ce que vous voyez. Dépend de la taille de l'écran, essayez de redimensionnement du navigateur 🙂
    • Je vous suggère de commencer à l'aide de firebug ( extension de firefox ). Choses comme celles-ci sera 10x plus facile à repérer à l'aide. [Mieux que les outils de dev de le reste des navigateurs]
    • Je suis en utilisant google Chrome, c'est de la console, et Firebug Peu.
    • Tout droit, comme je l'ai dit, je peux voir les 2 définitions différentes de l' #pied de page, et l'un d'eux a "position: relative", lorsqu'il est désactivé cette propriété, le problème est résolu.
    • Je suis à la recherche pour elle, mais je ne le vois pas 😐
    • J'ai ajouté le code que je vois sur firebug, j'espère que vous serez capable de les tracer.
    • C'est bizarre, parce que j'ai rien de tout cela dans mon CSS, c'est peut-être parce que les media queries. Je vais essayer d'ajouter la même chose pour tout le MQs. Espérons qu'il va régler ça. J'ai aussi un autre problème, si vous regardez attentivement le contenu sur la page d'ACCUEIL, vous verrez que l'en-tête sont éloignés beaucoup, ils sont censés être droit, en vertu de l'en-tête, mais il y a un grand espace, il y a environ 70px j'chose, et je ne vois pas où le problème apparaît, pouvez-vous jeter un coup d'œil ?
    • Ou vous pouvez ajouter de la "position: absolute !important;" si vous ne parvenez pas à laisser de trace. Btw, tous vos éléments ont 2 définitions différentes, vous feriez mieux de vérifier cela et de fixer, avant de fixer d'autres choses.
    • Que faire si la position relative de la div a été dynamique de la taille?
    • pourriez-vous svp poster une nouvelle question ou de fournir un lien vers votre page actuelle où cela est nécessaire.

    InformationsquelleAutor KBN
  3. 2

    Utiliser les css tables:

    FIDDLE1 - peu de contenu

    FIDDLE2 - peu de contenu + grand pied de page

    FIDDLE3 - beaucoup de contenu

    Balisage

    <header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

    CSS

    html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}
    • Merci beaucoup, expliquer quel était mon problème?
    • Désolé, mais la question vous avez répondu pour la générosité est une chose totalement différente de l'original. Nous ne pouvons malheureusement pas migrer des réponses à des questions, et je ne veux pas emporter le butin qui vous avez travaillé. Je vous laisse décider si vous voulez garder la réponse pour le bounty, ou si vous souhaitez supprimer votre réponse.
    • Voir aussi le commentaire que j'ai juste à gauche de la original asker.
    InformationsquelleAutor Danield
  4. -4

    Essayez d'ajouter 

    .footerClass {
     position:absolute;
     bottom:0;
}

    à votre fichier css et ajouter la classe footerClass à votre pied de page-tag

    • Ouais, je suis sur que maintenant, mais je tiens à le positionner par rapport, à cause du contenu qui sera réactif et un débordement vertical peut se montrer.
    • Donc, vous voulez le pied de page de rester de rester "au-dessus" du contenu qui pourrait dépassement de dessous le pied de page, de sorte que le pied de page est toujours visible?
    • Je peux le faire rester au-dessus du contenu avec un z-index, ce que je veux, c'est le contenu de pousser le pied de page en bas, et que le contenu soit toujours à 100% de haut, de sorte qu'il pousse le pied de page en bas de la page, peu importe ce qui est à l'intérieur du contenu.
    • Bon, j'allais encore avec le positionnement absolu, mais je voudrais aussi l'position le contenu à 50px au-dessus du fond et quel que soit l'espace dont vous avez besoin depuis le haut (position:absolute;bottom:50px;top:50px;)
    • Eh bien, déjà que sur mon localhost. Semble comme il n'y a pas moyen de contourner, je ne peux utiliser le positionnement absolu.
    InformationsquelleAutor pansarshrek