Tema: min-height no se expande
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 07/01/2012, 06:05
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 11 meses
Puntos: 539
Respuesta: min-height no se expande
Lo que busca realizar se conoce como pie abajo y cuerpo con altura 100%.
Son dos estructuras en una.
Aquí le dejo una vieja realización para que contraste el css con el que usted utiliza y adapte el marcado html a sus necesidades:
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>Kseso?: Pie abajo 2 Jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <style type="text/css">
  7. * {
  8. margin:0;
  9. outline:0 none;
  10. padding:0;
  11. position: relative;
  12. }
  13. html, body {
  14. font-size:1em;
  15. height:100%;
  16. width:100%;
  17. font-size: 1em;
  18. font-family:georgia,serif;
  19. background: #CD3335;
  20. font-style:italic;
  21. }
  22. #contenedor {
  23. height:auto !important;
  24. min-height:100%;
  25. height:100%;
  26. /*min-width: 800px; colocar los equivalentes para los ie*/
  27. overflow:hidden;
  28. }
  29. #cabecera {
  30. background:#0060F0;
  31. height:3em;
  32. text-align:center;
  33. z-index: 10;
  34. -moz-box-shadow: 0 0 5px #444;
  35. -webkit-box-shadow: 0 0 5px #444;
  36. -o-box-shadow: 0 0 5px #444;
  37. }
  38.  
  39. #contenido {
  40. background: #FF9966;
  41. width:70%;
  42. margin:0 auto -1500px auto;
  43. padding:0 0 1500px 0;
  44. overflow: hidden;
  45. }
  46.  
  47. .corte {
  48. clear:both;
  49. padding-top:3em;
  50. }
  51. #pie {
  52. background:#00C0F0;
  53. color:#FFFFFF;
  54. height: auto!important;
  55. min-height:3em; /*colocar los equivalentes para los ie*/
  56. height: 3em;
  57. margin-top:-3em;
  58. text-align:center;
  59. width: 100%;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64.   <div id="contenedor">
  65.        <div id="cabecera">
  66.           
  67.        </div>                      
  68.        <div id="contenido">
  69.        
  70.  
  71.        </div>
  72.    <div class="corte"></div>
  73.   </div>
  74.  
  75.   <div id="pie">
  76.    
  77.   </div>
  78. </body>
  79. </html>

Pero es sólo una forma de conseguirlo. Si hace una búsqueda, seguro que halla otra formas de conseguir lo mismo.

P.D.: los códigos están sin limpiar al 100%, ya que como le digo, es una antigua realización que contemplaba ciertas premisas. Así que seguramente más de una declaración esté de más.