342 votes

Bill the Lizard avatar

Comment obtenez-vous le pied de page pour rester au bas d’une page Web ?

Demandé el 3 de Septembre, 2008
Quand la question a-t-elle été
49968 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai un simple 2-colonne mise en page avec un pied de page qui efface à la fois la droite et la gauche de la div dans mon balisage. Mon problème est que je ne peux pas obtenir le pied de page pour rester au bas de la page dans tous les navigateurs. Il fonctionne si le contenu de pousse du pied de page en bas, mais ce n'est pas toujours le cas.

Mise à jour:

Il ne fonctionne pas correctement dans Firefox. Je vois une bande de couleur d'arrière-plan ci-dessous le pied de page quand il n'y a pas assez de contenu sur la page de pousser le pied tout le chemin vers le bas de la fenêtre du navigateur. Malheureusement, c'est l'état par défaut de la page.

Demandé el 3 de Septembre, 2008 par Bill the Lizard

Réponses

Trop de publicités?

210voto

Staale avatar
Staale Points 8795

Collant bas de page sur Google:

Avoir un avec contenir tout. Après le , placez le , puis le `` .

Répondu el 3 de Septembre, 2008 par Staale (8795 Points )

29voto

Jimmy avatar
Jimmy Points 35501

Vous pourriez utiliser suivantes à mettre le pied de page au bas de la page, mais assurez-vous que vos 2 colonnes ont le cas échéant afin qu’ils jamais obtenir obstrués par le pied de page.

Répondu el 3 de Septembre, 2008 par Jimmy (35501 Points )

14voto

Felipe Schenone avatar
Felipe Schenone Points 706

Voici une solution avec jQuery qui fonctionne comme un charme. Testé dans Firefox, Chrome, Safari et Opera.

Ce qu’il fait est : il vérifie si la hauteur de la fenêtre est supérieure à la hauteur du corps. Si c’est le cas, alors il change la marge-dessus du pied de page pour compenser.

Si votre pied de page dispose d’un marge-top (de 50 pixels, par exemple), vous devrez modifier la dernière partie pour :

Répondu el 18 de Février, 2012 par Felipe Schenone (706 Points )

11voto

81bronco avatar
81bronco Points 7071

Définir le CSS pour l' #footer :

position: absolute;
bottom: 0;

Vous devrez ensuite ajouter un padding ou margin vers le bas de votre #sidebar et #content à la hauteur de l' #footer ou lorsqu'ils se chevauchent, l' #footer va les couvrir.

Aussi, si je me souviens bien, IE6 a un problème avec l' bottom: 0 CSS. Vous pourriez avoir à utiliser un JS solution pour IE6 (si vous vous souciez de IE6 qui est).

Répondu el 3 de Septembre, 2008 par 81bronco (7071 Points )

1voto

Paul Sweatte avatar
Paul Sweatte Points 8668

Utiliser le positionnement absolu et z-index pour créer un collant pied de div à toute résolution à l'aide de la procédure suivante:

  • Créer un pied de page div avec position: absolute; bottom: 0; et la hauteur désirée
  • Définir le rembourrage de pied de page pour ajouter de l'espace entre le contenu du bas et le bas de la fenêtre
  • Créer un conteneur div qui encapsule le contenu du corps avec position: relative; min-height: 100%;
  • Définir l' html, body, et contenant div de height: 100% pour IE6
  • Ajouter le fond de rembourrage pour le contenu principal div qui est égale à la hauteur de plus de rembourrage de pied de page
  • Définir l' z-index des pied plus grand que le conteneur div si le pied est coupé

Voici un exemple:

<!doctype html>
<html>
<head>
  <title>Sticky Footer</title>
  <meta charset="utf-8">
  <style>
  .wrapper { position: relative; min-height: 100%; }
  .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
  .column { height: 2000px; padding-bottom: 300px; background-color: green; }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="column">
      <span>hello</span>
    </div>
    <div class="footer">
      <p>This is a test. This is only a test...</p>
    </div>
  </div>
</body>
</html>
Répondu el 26 de Août, 2012 par Paul Sweatte (8668 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

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.

Powered by:

Yandex
X