Tema: Mikmoros e IE
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 27/09/2010, 13:07
Avatar de abimaelrc
abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 8 meses
Puntos: 1517
Respuesta: Mikmoros e IE
El ejemplo que hace Mikmoro, funciona en todas las resoluciones, porque en realidad es que el contenedor es un 100% y luego el pie va después del contenedor solo se le resta al tamaño que tiene para que quede exactamente abajo.

Edito:
Mira este ejemplo para que tengas idea
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <title>Pie siempre abajo - Recursos CSS - araudi.net</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. html, body{
  8.     margin: 0;
  9.     padding: 0;
  10.     height: 100%;
  11. }
  12. #contenedor {
  13.     min-height: 100%;
  14.     height: auto !important;
  15.     height: 100%;
  16. }
  17. #cabecera{
  18.     height: 4em;
  19.     background-color: #399;
  20.     color: #fff;
  21.     text-align: center;
  22. }
  23. #contenido {padding: 1em;}
  24. #pie{
  25.     text-align: center;
  26.     background-color: #366;
  27.     color: #fff;
  28.     height: 3em;
  29.     margin-top: -3em;
  30. }
  31. .ejemplo{
  32.     position:relative;
  33.     top: 0.5em;
  34.     font-size: 1.2em;
  35. }
  36.  
  37. /*
  38. Este (clear) es importante para que el contenido no 
  39. se mezcle con el pie
  40. */
  41. .clear{
  42.     clear: both;
  43.     padding-top: 2em;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48.  
  49. <div id="contenedor">
  50.     <div id="cabecera">
  51.         <span class="ejemplo">Cabecera</span>
  52.     </div>
  53.  
  54.     <div id="contenido">
  55.         <span class="ejemplo">Contenido</span>
  56.         <p>
  57.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  58.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  59.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  60.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  61.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  62.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  63.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  64.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  65.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  66.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  67.         </p>
  68.         <p>
  69.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  70.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  71.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  72.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  73.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  74.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  75.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  76.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  77.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  78.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  79.         </p>
  80.         <p>
  81.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  82.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  83.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  84.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  85.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  86.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  87.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  88.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  89.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  90.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  91.         </p>
  92.         <p>
  93.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  94.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  95.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  96.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  97.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  98.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  99.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  100.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  101.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  102.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  103.         </p>
  104.     </div>
  105.     <div class="clear"></div>
  106. </div>
  107.  
  108. <div id="pie"> 
  109.     <span class="ejemplo">Pie</span> 
  110. </div>
  111.  
  112. </body> 
  113. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
Última edición por abimaelrc; 27/09/2010 a las 13:26