Foros del Web » Creando para Internet » CSS »

Div Contenido con Height variable (liquido?)

 Estas en el tema de Div Contenido con Height variable (liquido?) en el foro de CSS en Foros del Web. Hola a Toda la Comunidad! Otra vez dando guerra, espero me puedan ayudar o bien guiarme al camino correcto... Ya le pregunte a mi amigo ...
  #1 (permalink)  
Antiguo 23/07/2010, 10:07
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 14 años, 5 meses
Puntos: 0
Pregunta Div Contenido con Height variable (liquido?)
Hola a Toda la Comunidad! Otra vez dando guerra, espero me puedan ayudar o bien guiarme al camino correcto...

Ya le pregunte a mi amigo Google y no me supo responder (o a lo mejor no "supe entender"); y aqui en los forosdelweb encontre la pag de araudi.net (3 cajas height 100% con scroll) que en Safari, Chrome, y IE7 si funciona pero en IE8 no... (raro no?)

IE8 no aparece scroll cuando tengo resolucion 800x600 y no muestra PIE y si tengo 1280x720 hay un espacio vacio entre el Div PIE y la barra de estado...

Esto tiene araudi:
<style type="text/css">
html, body { height: 100%;
overflow: hidden;
margin: 0;
}
#superior { background-color: #ff0;
font-size: 9px;
position: relative;
height: 80px;
}
#inferior { background-color: #ff0;
font-size: 9px;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
}
#central { background-color: #33f;
overflow: auto;
position: absolute;
width: 100%;
top: 80px;
bottom: 80px;
}
</style><!--[if IE]>
<style>
#superior {
height: 14%;
}
#inferior {
position: relative;
height: 14%;
}
#central { position: relative;
height: 72%;
top: 0px;
bottom: 0px;
}
</style>
<![endif]-->
</head>
<body>
<div id="contenedor">
<div id="superior">SUPERIOR</div>
<div id="central">central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
central<br />
</div>
<div id="inferior">INFERIOR</div>
</div>
</body>
</html>

En otras palabras:
2 DIVS con Altura (height) Fija: Cabeza y Pie.
2 DIVS con Altura Liquida: Contenedor y Contenido. Donde dependiendo de la resolucion de cada visitante la pagina siempre ocupe toda la pantalla en lo vertical.

Se agradece por adelantado!

pd. si creen que estoy muy tonto... no se equivocan . Pero intento ser cada dia "menos tonto"...
Última edición por manos_80; 23/07/2010 a las 10:43
  #2 (permalink)  
Antiguo 23/07/2010, 10:54
 
Fecha de Ingreso: julio-2010
Mensajes: 26
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: Div Contenido con Height variable (liquido?)
pues segun lo prove y se ve bien pero no lo se prueba y me dices que tal te fue

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. html, body { height: 100%;
  6. overflow: hidden;
  7. margin: 0;
  8. }
  9. #superior { background-color: #ff0;
  10. font-size: 9px;
  11. position: relative;
  12. height: 80px;
  13. }
  14. #inferior { background-color: #ff0;
  15. font-size: 9px;
  16. width: 100%;
  17. height: 80px;
  18. position: absolute;
  19. bottom: 0;
  20. }
  21. #central { background-color: #33f;
  22. overflow: auto;
  23. position: absolute;
  24. width: 100%;
  25. top: 80px;
  26. bottom: 80px;
  27. }
  28. </style>
  29.  
  30. </head>
  31. <body>
  32. <div id="contenedor">
  33. <div id="superior">SUPERIOR</div>
  34. <div id="central">central<br />
  35. central<br />
  36. central<br />
  37.  
  38. central<br />
  39. central<br />
  40. central<br />
  41. central<br />
  42. central<br />
  43. central<br />
  44. central<br />
  45. central<br />
  46. central<br />
  47.  
  48. central<br />
  49. central<br />
  50. central<br />
  51. central<br />
  52. central<br />
  53. central<br />
  54. central<br />
  55. central<br />
  56. central<br />
  57.  
  58. central<br />
  59. central<br />
  60. central<br />
  61. central<br />
  62. central<br />
  63. central<br />
  64. </div>
  65. <div id="inferior">INFERIOR</div>
  66. </div>
  67. </body>
  68.  
  69. </html>

salu2
  #3 (permalink)  
Antiguo 26/07/2010, 06:30
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Div Contenido con Height variable (liquido?)
Gracias por tu respuesta danielalejandro!

No se que pasa... cuando pruebo el link directamente de www.araudi.net/ejemplos/3_capas_con_scroll.html no funciona como deberia...

Pero si lo pruebo "local" SI. Como pasa esto? Si lo aplico en un sitio web tendria este mismo problema???

Gracias por tu ayuda!


Cita:
Iniciado por danielalejandro Ver Mensaje
pues segun lo prove y se ve bien pero no lo se prueba y me dices que tal te fue

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. html, body { height: 100%;
  6. overflow: hidden;
  7. margin: 0;
  8. }
  9. #superior { background-color: #ff0;
  10. font-size: 9px;
  11. position: relative;
  12. height: 80px;
  13. }
  14. #inferior { background-color: #ff0;
  15. font-size: 9px;
  16. width: 100%;
  17. height: 80px;
  18. position: absolute;
  19. bottom: 0;
  20. }
  21. #central { background-color: #33f;
  22. overflow: auto;
  23. position: absolute;
  24. width: 100%;
  25. top: 80px;
  26. bottom: 80px;
  27. }
  28. </style>
  29.  
  30. </head>
  31. <body>
  32. <div id="contenedor">
  33. <div id="superior">SUPERIOR</div>
  34. <div id="central">central<br />
  35. central<br />
  36. central<br />
  37.  
  38. central<br />
  39. central<br />
  40. central<br />
  41. central<br />
  42. central<br />
  43. central<br />
  44. central<br />
  45. central<br />
  46. central<br />
  47.  
  48. central<br />
  49. central<br />
  50. central<br />
  51. central<br />
  52. central<br />
  53. central<br />
  54. central<br />
  55. central<br />
  56. central<br />
  57.  
  58. central<br />
  59. central<br />
  60. central<br />
  61. central<br />
  62. central<br />
  63. central<br />
  64. </div>
  65. <div id="inferior">INFERIOR</div>
  66. </div>
  67. </body>
  68.  
  69. </html>

salu2
  #4 (permalink)  
Antiguo 26/07/2010, 07:01
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Div Contenido con Height variable (liquido?)
si miras el codigo fuente del sitio original, veras que tiene un comentario condicional.
Código: 
<!--[if IE]>
<style>
#superior {
height: 14%;
}
#inferior {
position: relative;
height: 14%;
}
#central { position: relative;
height: 72%;
top: 0px;
bottom: 0px;
}
</style>
<![endif]-->
esto solamente lo usa iexplorer. bien, lo que dice esta condicion es algo como "aplicar a todas las versiones de iexplorer". lo cierto es que ese arreglo no lo necesita iexplorer8. sin él, el ejemplo se muestra correctamente. para observarlo, copia el codigo fuente y elimina el contenido antes mostrado (el comentario condicional). no estoy seguro, pero creo que el arreglo del comentario condicional solo aplicaria a versiones de iexplorer7 y anteriores.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Etiquetas: contenido, height, variables
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 00:02.