css position de pied bâton en bas du navigateur?

StackOverflow https://stackoverflow.com/questions/2571573

Question

Je suis un problème avec mon site http://artygirl.co.uk/pixie/ A propos / Je ne peux pas sembler obtenir le pied de page pour coller automatiquement au bas du navigateur, et montrer le reste de mon arrière-plan. Y at-il une meilleure solution que d'utiliser la position: fixe ou absolue

Je pense qu'il ya peut-être d'autres styles plus-riding quelques tests que je fais dans Firebug.

Merci pour votre aide Cordialement Judi

Était-ce utile?

La solution

Ceci 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 écran vraiment grand, vous verriez la même chose.

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

Si vous voulez essayer ce qui précède le code que je viens de publier ici: détecte la présence de scrollbar avec jQuery encore difficile? peut être utile pour vous.

Autres conseils

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 sera toujours apparaître au bas de la page et tout recouvrement. Il suffit d'ajouter la marge / rembourrage supplémentaire au fond de vos principaux divs conteneurs égale à la hauteur du pied de page +5px il ne recouvre pas votre contenu.

travaille dans à peu près tous les navigateurs, je l'ai testé.

Je l'ai utilisé la technique dans cet article avant: mise en page CSS: hauteur 100% avec en-tête et pied de page . Il nécessite quelques balises supplémentaires dans votre code HTML.

Pour régler la hauteur du html et le corps à 100%, insérer un conteneur div avec min-hauteur de 100% et la position relative, et le nid votre pied avec position: absolute, inférieure: 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>

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

Vous pouvez définir une min-height sur #content. Cela ne réglera pas le pied de page au bas du navigateur spécifiquement, mais veillera à ce que vous pouvez toujours voir une certaine quantité de l'arrière-plan.

Comme alternative, l'utilisation de JavaScript, vous pourriez déterminer la hauteur de la fenêtre du navigateur, puis calculer la min-height pour #content, et l'appliquer avec JavaScript. Cela permettrait d'assurer le pied de page est toujours au bon endroit.

Je l'ai compris. Html avait une propriété CSS pour l'arrière-plan en disant la couleur blanche.

Je préfère toujours les pieds de page de page sage en raison de contenus variables sur les pages. J'utilise une marge supérieure de 5em pour mes pieds de page. Le plus souvent qu'autrement, nous savons que la hauteur du contenu qui peut se produire sur les pages.

Si vous utilisez la bibliothèque Compass Sass , il y a aussi une autre option. Vous pouvez utiliser le mixin collant-bas de page ( démo ). Il exige que le pied soit à hauteur fixe, et que votre HTML a une certaine structure générale.

Ne pas utiliser position: absolute utiliser Position:. Relative au lieu 

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

Position:. Absolue collera au bas de l'écran en position relative ne sera pas ignorer les autres divs, donc il reste en bas de la page complète

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top