Maison  >  Article  >  interface Web  >  Comment positionner un pied de page en bas du navigateur dans Firefox et Internet Explorer ?

Comment positionner un pied de page en bas du navigateur dans Firefox et Internet Explorer ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-31 20:33:02889parcourir

How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?

Positionnement du pied de page en bas avec CSS

De nombreux développeurs rencontrent des problèmes lorsqu'ils tentent de positionner un pied de page en bas d'une fenêtre de navigateur. Malgré diverses techniques suivies, le pied de page peut apparaître au milieu à la place. Voici une solution à ce problème courant pour Firefox et Internet Explorer.

Code CSS

Le code CSS suivant collera efficacement le pied de page au bas du navigateur :

<code class="css">#Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}</code>

Explication

  1. position : absolue; : Supprime le pied de page du flux normal du document, lui permettant d'être positionné indépendamment.
  2. bottom: 0; : Définit le bord inférieur du pied de page à zéro, ce qui le positionne en bas de la fenêtre.
  3. width : 100%; : garantit que le pied de page s'étend sur toute la largeur de l'écran.

Structure HTML

Assurez-vous que votre structure HTML contient un < ;div> avec l'id="Footer" pour le pied de page :

<code class="html"><form>
  ...
  <div class="Main" />
  <div id="Footer" />
</form></code>

Notes supplémentaires

  • Position de réglage : fixe ; le pied de page peut fonctionner pour Firefox mais pas pour Internet Explorer.
  • Ajuster la marge ou le remplissage du contenu principal (class="Main") peut être nécessaire pour libérer de l'espace pour le pied de page.

En appliquant ces styles CSS, vous devriez pouvoir positionner avec succès le pied de page en bas de la fenêtre du navigateur dans Firefox et Internet Explorer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn