Tema: Simular FrameSet con alturas en píxeles y porcentajes mediante IFRAME y CSS
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 24/07/2009, 14:32
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Simular FrameSet con alturas en píxeles y porcentajes mediante IFRAME y CS
Hola de nuevo:
Fue más fácil (de encontrar) de lo que pensaba

Todo el mérito es de los códigos de Mikmoro, me he limitado a mezclar un par de ellos, y hacer un par de arreglos finales.
Échale un vistazo y dime si esto son los "iframes" que andabas buscando, Negora.

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" lang="es-es">
  3. <head>
  4. <title>Mikmoro&Kseso? jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. html, body { height: 100%;
  8. overflow: hidden;
  9. margin: 0;
  10. }
  11. #arriba {
  12. background-color: #660;
  13. position: relative;
  14. height: 50px;
  15. font-size: 1.5em;
  16. padding: .5em;
  17. font-family: serif;
  18. }
  19. #abajo { background-color: #cc0;
  20. overflow: auto;
  21. position: absolute;
  22. width: 100%;
  23. top: 50px;
  24. bottom: 0;
  25. font-family: verdana;
  26. font-size: 1.2em;
  27. }
  28. #interior {padding: 10px; font-size: .9em;}
  29. </style>
  30. </head>
  31. <body>
  32. <div id="contenedor">
  33. <div id="arriba">Hola Epi. Yo estoy arriba y mido 50 px. Soy pequeñito pero nadie me deja debajo :-)</div>
  34. <div id="abajo">
  35. Hola Blas. Yo estoy debajo y mido todo lo que me haga falta. Pero me quedo por debajo de ti.<br />
  36. <div id="interior">
  37. otra línea<br />
  38. otra línea<br />
  39. otra línea<br />
  40. otra línea<br />
  41. otra línea<br />
  42. otra línea<br />
  43. otra línea<br />
  44. otra línea<br />
  45. otra línea<br />
  46. otra línea<br />
  47. otra línea<br />
  48. otra línea<br />
  49. otra línea<br />
  50. otra línea<br />
  51. otra línea<br />
  52. otra línea<br />
  53. otra línea<br />
  54. otra línea<br />
  55. otra línea<br />
  56. otra línea<br />
  57. otra línea<br />
  58. otra línea<br />
  59. otra línea<br />
  60. otra línea<br />
  61. otra línea<br />
  62. otra línea<br />
  63. otra línea<br />
  64. otra línea<br />
  65. otra línea<br />
  66. otra línea<br />
  67. otra línea<br />
  68. otra línea<br />
  69. otra línea<br />
  70. otra línea<br />
  71. otra línea<br />
  72. otra línea<br />
  73. otra línea<br />
  74. otra línea<br />
  75. otra línea<br />
  76. otra línea<br />
  77. otra línea<br />
  78. otra línea<br />
  79. ¿se me ve? Porque ya no hay nada más debajo
  80. </div>
  81. </div>
  82. </div>
  83. </body>
  84. </html>
Añade, quita contenidos, redimensiona la ventana. Hazle las perrerías que creas conveniente y seguimos jugando si hay que modificar algo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++