Pied de page CSS en théorie

Je sais qu'il y a 1001 hacks de bas de page CSS qui nécessitent des contorsions multiples afin de satisfaire même le navigateur le plus ancien.Pied de page CSS en théorie

Mais je voudrais savoir comment un pied de page peut être fait pour un navigateur moderne conforme aux normes. Je m'attendais à ce que le code suivant fonctionne, mais ce n'est pas le cas - le pied de page ne se trouve pas en bas de la page mais directement en dessous du "contenu". Pourquoi?

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Footer Test</title> 
    <style type="text/css"> 
     html 
     { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     body 
     { 
      height: 100%; 
      min-height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     #page 
     { 
      position: relative; /* <--- relative position for footer's parent */ 
      height: 100%; 
      background-color: #AAA; 
     } 
     #header 
     { 
      height: 3em; 
      margin: 0; 
      padding: 1em; 
      background-color: #F00; 
     } 
     #content 
     { 
      margin: 0; 
      padding: 1em; 
      background-color: #0F0; 
     } 
     #footer 
     { 
      position: relative; 
      bottom: 0; /* <--- distance from #footer's bottom to #page's bottom */ 
      height: 3em; 
      margin: 0; 
      padding: 1em; 
      background-color: #00F; 
     } 
    </style> 
</head> 
<body> 
    <div id="page"> 
     <div id="header"> 
      <p>This is the header!</p> 
     </div> 
     <div id="content"> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
     </div> 
     <div id="footer"> 
      <p>This is the footer!</p> 
     </div> 
    </div> 
</body> 
</html>

Edit:

Précision: Je veux que le pied de page en bas de la fenêtre . Donc, s'il y a peu de contenu, il devrait y avoir un écart en dessous du contenu, et le pied de page devrait être au bas de la page. Mais s'il y a beaucoup de contenu, les barres de défilement devraient apparaître, et le pied de page ne devrait devenir visible que lorsque l'on défilerait vers le bas.

Source

2013-07-05 thofou76

#footer 
     { 
      position: fixed; 
      width:100%; 
      bottom: 0; /* <--- distance from #footer's bottom to #page's bottom */ 
      height: 3em; 
      margin: 0; 
      padding: 1em; 
      background-color: #00F; 
     }

Source

2013-07-05 10:46:46 Gangadhar

Malheureusement, le contenu ne pousse pas plus que le pied de page fixe vers le bas. – thofou76

position: fixe sera toujours positions par rapport à l'écran, donc il se positionnera au bas de l'écran quel que soit le contenu – Gangadhar

Oui, mais ce n'est pas le genre de pied de page que je veux atteindre. J'ai édité ma question pour clarifier. – thofou76

Je ne suis toujours pas sûr de savoir pourquoi la version originale ne fonctionnait pas ...

Mais le code suivant est hack gratuit et semble fonctionner:

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Footer Test</title> 
    <style type="text/css"> 
     html 
     { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     body 
     { 
      margin: 0; 
      padding: 0; 
     } 

     #page 
     { 
      min-height: 100%; 
      width: 100%; 
      position: absolute; 
      background-color: #AAA; 
     } 

     #header 
     { 
      padding: 1em; 
      background-color: #F00; 
     } 

     #content 
     { 
      margin-bottom: 5em; /* <--- footer's height */ 
      padding: 1em; 
      background-color: #0F0; 
     } 

     #footer 
     { 
      width: 100%; 
      position: absolute; 
      bottom: 0; 
      background-color: #00F; 
     } 

     #footer > * 
     { 
      padding: 1em; /* <--- additional rule for footer's content */ 
     } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { $("button").click(function() { $("#hidden").slideToggle(1000); }) }); 
    </script> 
</head> 
<body> 
    <div id="page"> 
     <div id="header"> 
      <p>This is the header!</p> 
     </div> 
     <div id="content"> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
      <p>Yeah, some content!</p> 
      <button>Push the footer!</button> 
      <div id="hidden" style="display: none"> 
       <p>Begin of extra content</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>Much hidden content!</p> 
       <p>End of extra content</p> 
      </div> 
     </div> 
     <div id="footer"> 
      <p>This is the footer!</p> 
     </div> 
    </div> 
</body> 
</html>

Ce que je n'aime pas à ce sujet:

Le contenu doit connaître la hauteur du pied de page.
Règle supplémentaire requise pour le contenu du pied de page.

Source

2013-07-05 19:55:50 thofou76

ici vous pouvez trouver un code comme suit

Ajoutez les lignes de CSS suivantes à votre feuille de style. La valeur négative pour la marge dans .wrapper est le même nombre que la hauteur de .footer et .push. La marge négative doit toujours être égale à la hauteur totale du pied de page (y compris tout remplissage ou bordures que vous pouvez ajouter).

En CSS:

* { 
margin: 0; 
} 
    html,body 
    { 
     height: 100%; 
     } 
     .wrapper { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     margin: 0 auto -4em; 
     } 
     .footer, .push { 
     height: 4em; 
     }

Suivre cette structure HTML. Aucun contenu ne peut être en dehors des balises .wrapper et .footer div à moins qu'il ne soit absolument positionné avec CSS. Il ne devrait pas non plus y avoir de contenu à l'intérieur de la div .push car c'est un élément caché qui "pousse" le pied de page pour qu'il ne chevauche rien.

Dans HTML corps:

<div class="wrapper"> 
      <p>Your website content here.</p> 

     <div class="push"></div> 
     </div> 
     <div class="footer"> 
      <p>Copyright (c) 2013</p> 
     </div>

Source

2013-07-08 10:53:39

Il manque quelque chose dans la section CSS en haut – Gangadhar

Pied de page CSS en théorie

Répondre

Questions connexes