Foros del Web » Creando para Internet » CSS »

min-height no se expande

 Estas en el tema de min-height no se expande en el foro de CSS en Foros del Web. Hola, tengo un problema , creo que es del min-height. Acá les dejo el código http://pastebin.com/ygNxFjpZ La franja naranja debería ocupar todo el espacio entre ...
  #1 (permalink)  
Antiguo 07/01/2012, 04:00
 
Fecha de Ingreso: octubre-2008
Mensajes: 42
Antigüedad: 15 años, 6 meses
Puntos: 0
Pregunta min-height no se expande
Hola, tengo un problema , creo que es del min-height.
Acá les dejo el código
http://pastebin.com/ygNxFjpZ
La franja naranja debería ocupar todo el espacio entre las dos franjas grises, el problema es que solo ocupa una parte y lo demas que se ve es el fondo (rojo).
Qué pasa, como hago para que la parte naranja ocupe todo el espacio entre la cabecera y el pie
Gracias de antemano
  #2 (permalink)  
Antiguo 07/01/2012, 06:05
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 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.
  #3 (permalink)  
Antiguo 07/01/2012, 06:50
 
Fecha de Ingreso: octubre-2008
Mensajes: 42
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: min-height no se expande
me echas una mano?
Avancé algo

Código CSS: 
Ver original
  1. /*Estructura body, header, article, footer*/
  2. body {
  3.   margin: 0px;
  4.   overflow:hidden;
  5.   background-color: red;/*#333333;*/
  6.   min-width: 950px;
  7.     height: 100%;
  8.     overflow: auto; 
  9.  
  10. }
  11. header {
  12.     float: left;
  13.   height: 80px;
  14.   min-width: 910px;
  15.     padding:20px;
  16.   background-color: #333333; 
  17. }
  18. article {
  19.     float: left;
  20.     min-width: 750px;
  21.   min-height: 200px;
  22.     padding-left: 100px;
  23.     padding-right: 100px;
  24.     padding-top: 50px;
  25.     padding-bottom: 50px;
  26.   background: url(fondo.png) repeat-x #FFFFFF;
  27. }
  28. footer {
  29.     float: left;
  30.   border-top: 8px solid #606060;
  31.   background-color: #333333;
  32.   min-height: 42px;
  33.   min-width: 950px;
  34.   clear: both;
  35. }
  36. /*Fuentes y otros*/
  37.  
  38. @font-face {
  39.   font-family: 'Sans';
  40.     src: local("@"), url('fuentes/sans.ttf') format("truetype");
  41. }
  42. @font-face {
  43.   font-family: 'Purisa';
  44.   src: local("@"), url('fuentes/purisa.ttf') format("truetype");
  45. }
  46. li {
  47.     list-style:none;
  48. }
  49.  
  50. /*Cabecera*/
  51. section.logo {
  52.   float: left;
  53.   width: 360px;
  54. }
  55. section.login {
  56.   float: right;
  57.   width: 550px;
  58. }
  59. ul.login {
  60.   float: right;
  61.     padding-left: 19px;
  62.     margin:0;
  63. }
  64.  
  65. input.login {
  66.   border: 5px solid #808080;
  67.     padding-left: 8px;
  68.     padding-right: 8px;
  69.     font-size: 14pt;
  70.     width: 210px;
  71.     height: 40px;
  72. }
  73. .texto_cabecera {
  74.     color: #e3dedb;
  75.     font-size: 19pt;
  76.     font-family: Sans;
  77. }
  78.  
  79. /*Article*/
  80. section.registro {
  81.     float: left;
  82.     width: auto;
  83.  
  84. }
  85.  
  86. .registrate {
  87.     color: #ffd42a;
  88.     font-size: 50pt;
  89.     font-family: Purisa;
  90.     text-align:center;
  91. }
  92.  
  93. .form_registro {
  94.     border-spacing: 15px 25px;
  95. }
  96. .texto_registro {
  97.     color: #999999;
  98.     font-size: 31pt;
  99.     font-family: Sans;
  100.     text-align:right;
  101.  
  102. }
  103. .boton_registro {
  104.     text-align:center;
  105.  
  106. }
  107. section.blind {
  108.     float: right;
  109.     width: auto;
  110.     text-align: left;
  111.  
  112.  
  113. }
  114. /* Botones */
  115. .boton {
  116.   background-color: #6c5d53;
  117.   border: 4px solid #483e37;
  118.     color: #fff6d5;
  119.   width: 196px;
  120.   height: 55px;
  121.     font-size: 20pt;
  122.     font-family: Sans;
  123.   
  124. }
  #4 (permalink)  
Antiguo 07/01/2012, 07:18
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: min-height no se expande
Cita:
Iniciado por cfoch Ver Mensaje
me echas una mano?
Avancé algo
Por favor. Hágase acreedor de esa ayuda. Al menos tómese la molestia de exponer con un mínimo en qué necesita que se le ayude.

N.B.: Tómese mi respuesta como lo que es. La otra opción que tenía era desligarme por completo del tema.
  #5 (permalink)  
Antiguo 07/01/2012, 09:56
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 14 años, 5 meses
Puntos: 34
Respuesta: min-height no se expande
Cita:
Iniciado por kseso? Ver Mensaje
N.B.: Tómese mi respuesta como lo que es. La otra opción que tenía era desligarme por completo del tema.
Offtopic: Que significan las siglas N.B.? No las habia visto nunca.
Un saludo :)
  #6 (permalink)  
Antiguo 07/01/2012, 13:57
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
De la wiki:
Cita:
Nota Bene es una locución latina que significa "nota bien", en el sentido de "ten cuidado", "fíjate bien". Es frecuente en los libros para llamar la atención sobre algún punto. Aparece normalmente abreviada como N.B.
Gramaticalmente, está formada con el imperativo de noto (nota) y el adverbio bene (bien).
  #7 (permalink)  
Antiguo 07/01/2012, 14:19
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 14 años, 5 meses
Puntos: 34
Respuesta: min-height no se expande
Gracias por la aclaracion ;)
  #8 (permalink)  
Antiguo 07/01/2012, 17:07
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años, 1 mes
Puntos: 116
Respuesta: min-height no se expande
@Kseso?
Cita:
/*min-width: 800px; colocar los equivalentes para los ie*/

min-height:3em; /*colocar los equivalentes para los ie*/
A que equivalentes te refieres?
__________________
Programador jQuery & PHP
  #9 (permalink)  
Antiguo 07/01/2012, 17:33
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: min-height no se expande
Cita:
Iniciado por ZoroRoronoa Ver Mensaje
@Kseso?
A que equivalentes te refieres?
sera el clasico
Código CSS: 
Ver original
  1. min-height:3em;
  2. height:auto !important;
  3. height:3em;
Esto para IE6 el 7 lo interpreta "correctamente"
__________________
Toroflix - movies.
  #10 (permalink)  
Antiguo 07/01/2012, 19:41
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: min-height no se expande
Cita:
Iniciado por ZoroRoronoa Ver Mensaje
@Kseso?


A que equivalentes te refieres?
A cosas demasiado viejas que en algún momento era imprescindible tener a mano, como:
Código HTML: 
Ver original
  1. <!--[if IE 6]><style>#contenedor {width:expression( (document.documentElement.clientWidth < 700)? "700px" : "auto"    );}</style><![endif]-->

Que por algo ya decía que:
Cita:
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:51.