CSS - Com situar una capsa "PEU" a la part baixa de la finestra.

Introducció:
Tenim el codi següent:

I com veieu estem fent servir models xhtml1.0 transitional o xhtml1.0 strict, amb la qual cosa hem perdut la capacitat de posicionar capses tocant a la part inferior de la finestra del navegador tal i com passava uns pocs anys abans amb versions de navegadors anteriors. És una cosa que dona molts mals de cap habitualment per qui estava acostumat a treballar a la manera antiga ja que les pàgines queden com penjant de dalt quan encara no hi ha prou continguts.



La raó per la qual passa això té a veure amb que amb aquests modes transitional i strict els navegadors no consideren que el body hagi d'arribar de dalt a baix de la finestra. Hi ha una comprobació que podeu fer per adonar-vos d'això que és posar una vora a body i mirar fins on arriba quan encara no hi ha continguts.

body {border:5px solid #ff0000;}

El resultat és aquest:



Solució:

1. La capsa body no arriba a tocar ni el sostre ni les parets degut a que el navegador li representa marges i farcits en aquesta capsa per defecte. Per solucionar això fem:
   
   
   body {margin:0; padding:0;}
   
   


2. La body no arriba fins a baix. Per aconseguir-ho hem de definir els CSS següents:
   
   html, body {height:100%;}
   body {margin:0; padding:0; }
   
   
   
   
3. Un cop estirat el body la capsa ajustadora també la podrem estirar al 100% del que ocupi el body.
4. A la fulla css posarem el següent codi:
   
   body { margin:0; padding:0px; background-color:#000000;
   /* Així posem els marges de body a zero. */
   }
   
   html, body {
   /* "html, body" selector de grup. */
   height:100%;
   /* ocupen el 100% de la finestra estirant body */
   }
   
   #ajustadora {
   width:955px;
   
   margin:auto;
   /* Això centra la capsa ajustadora */
   
   min-height:100%;
   /* ajustadora ocupa com a mínim el 100% de body */
   
   /* NOTA: min-height: no està suportat a versions anteriors de Internet Explorer 7, a no ser que li poseu la biblioteca IE7.js */
   
   

   
   Com veieu la capsa ajustadora arriba arran de finestra però la capsa peu sobresurt de la pantalla.

   
   margin-bottom:-50px;
   /* Això serveix per restar a l'alçada mínima de l'ajustadora, que és el 100% de la finestra, el que té d'alçada la capsa peu i d'aquesta manera aconseguim que la capsa "PEU" entri a la pantalla */
   
   /*I per que el text de continguts no es superposi o s'amagui a causa de la footer, posem: */
   padding-bottom:50px; /* l'alçada de peu */
   /* I fins i tot posaríem una mica més per que l'usuari vegi espai*/
   padding-bottom:100px;
   }
   
   #menu {width:150px; height:300px; float:left;}
   #lateral {width:150px; height:300px; float:right;}
   #continguts { }
   #peu {width:995px; margin:auto; height:50px; background-color:#333333;}



5. NOTA: Potser convindria posar a #peu l'atribut: clear:both; en cas que les capses menu i lateral sobresurtissin per sobre de peu per contenir massa coses.



6. En un capítol més endavant i amb l'ajut de javascript farem que les capses menu i lateral arribin fins avall.

Agraïments i crèdits:
La solució que heu vist està basada a CSS STICKY FOOTER, Clilqueu aquí per anar a la pàgina original.