css footer position coller au bas du navigateur?

Je vais avoir un problème avec mon site http://artygirl.co.uk/pixie/about/ je n'arrive pas à obtenir le pied de page automatiquement bâton pour le bas du navigateur, et montrer au reste de mon arrière-plan.
Est-il une meilleure solution que d'utiliser la position:fixe ou absolue?

Je pense qu'il y a peut-être d'autres styles d'équitation quelques tests je ne dans firebug.

Merci pour votre aide
Ce qui concerne
Judi

source d'informationauteur brightmist.co.uk

  1. 4

    C'est toujours un peu difficile, vous pouvez augmenter la min-height de votre zone de contenu, mais même alors, si quelqu'un a un grand écran, vous auriez du voir la même chose.

    Vous pouvez utiliser un peu de JavaScript pour augmenter la min-height si quelqu'un a une énorme fenêtre d'affichage, mais qui est encore moins élégant. Je ne sais pas si il y a une CSS, la seule solution à cette question.

    Si vous voulez essayer le code que j'ai juste posté ici: La détection de présence de la barre de défilement avec jQuery encore difficile? peut être utiliser pour vous.

  2. 37

    CSS:

    .podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

    HTML:

    <div class="podbar">
    Put your footer here
</div>

    Cela va créer un collant qui apparaîtra toujours au bas de la page et recouvrent tout. Seulement ajouter de la marge/rembourrage pour le fond de votre récipient principal divs égale à la hauteur de pied de page +5px afin de ne pas superposer votre contenu.

    Ouvrages dans à peu près tous les navigateurs que j'ai testé.

  3. 8

    J'ai utilisé la technique dans cet article avant: Mise en page CSS: 100% de la hauteur de l'en-tête et pied de page. Il n'a besoin d'un balisage dans votre code HTML.

  4. 3

    Régler la hauteur de l'html et du corps à 100%, insérer un div conteneur avec min-height de 100% et la position relative et le nid de votre pied de page avec position: absolute, bottom: 0;

    /* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>
  5. 2

    Ici vous avez un exemple et une explication http://ryanfait.com/sticky-footer/

  6. 0

    Vous pouvez définir un min-height sur #content. Ce ne sera pas corrigé le pied de page pour le bas du navigateur, mais fera en sorte que vous pouvez toujours voir un certain montant de l'arrière-plan.

    Comme une alternative, à l'aide de JavaScript, vous pouvez déterminer la hauteur de la fenêtre du navigateur, puis de calculer la min-height pour #contentet de l'appliquer à l'aide de JavaScript. Cela permettrait de s'assurer que le pied de page est toujours à la bonne place.

  7. 0

    J'ai pensé à elle. Html a une propriété css pour le fond en disant que la couleur blanche.

  8. 0

    Je préfère toujours la page sage pieds parce que de la variable contenu sur les pages. J'utilise une marge supérieure de 5em pour mon pieds de page. Plus souvent que pas, nous savons que la hauteur de contenu qui peuvent se produire sur les pages.

  9. 0

    Si vous utilisez le Compas bibliothèque pour Sassil y a aussi une autre option. Vous pouvez utiliser la Boussole du collant-pied de mixin (démo). Il faut que le pied de page fixe-hauteur, et que votre HTML a une certaine structure générale.

  10. 0

    Ne pas utiliser position:absolute utilisation position:relative à la place.

    .footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

    position: absolute va le coller sur le bas de l'écran, tandis que la position relative de ne pas ignorer les autres divs, donc il va rester au bas de la page complète.