Tema: Tamaño vertical relativo y overflow en div
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 29/11/2012, 10:54
JUANFM
 
Fecha de Ingreso: enero-2009
Ubicación: Alicante
Mensajes: 20
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Tamaño vertical relativo y overflow en div
Hola a todos, siento mucho haber posteado de esa forma, lleváis razón, de hecho no lo he expresado como me gustaría ya que no tenia internet y lo hice desde la BlackBerry pero antes de postearlo he mirado cientos uy cientos de soluciones, pense que poniéndolo aquí ademas le podría servir a alguien que tenga mi mismo problema, lo mismo es una chorrada de pregunta pero se me ha atragantado. Chicote, esa opción que tu me das ya la había probado yo, a ver hay un detalle, y es que así cuando se hace overflow la barra de desplazamiento queda por debajo de la capa de arriba, yo lo que quiero es, vista esta modificación del código, que la caba de abajo aparezcan las barras de desplazamiento. Vuelvo a reformular mi pregunta... es posible hacer que, siendo la capa superior posicionamiento relativo y un alto específico, la capa inferior, tambien relativa, ocupe el 100% del ancho que deja esta con respecto al contenedor?

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 xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.     <head>
  5.         <title>templates</title>
  6.         
  7.         <style>
  8.             html, body{
  9.                 height:100%;
  10.                 min-height:100%;
  11.                 margin:0;
  12.                 padding:0;
  13.                 color:#FFFFFF;
  14.             }
  15.             #contenedor{
  16.                 position: relative;
  17.                 float:left;
  18.                 width:600px;
  19.                 height:100%;
  20.                 min-height:100%;
  21.                 background:blue;
  22.             }
  23.             #arriba{
  24.                 position:relative;
  25.                 float:left;
  26.                 width:100%;
  27.                 height:100px;
  28.                 background:red;
  29.                 z-index: 2;
  30.             }
  31.             #abajo{
  32.                 position:relative;
  33.                 width:100%;
  34.                 background:black;
  35.                 height:100%;
  36.                 z-index: 1;
  37.                 overflow:auto;
  38.                 max-height:100%;
  39.             }
  40.             
  41.         </style>
  42.     </head>
  43.     
  44.     <body>
  45.         <div id="contenedor">
  46.             <div id="arriba">Arriba</div>
  47.             <div id="abajo"></div>
  48.         </div>
  49.     </body>
  50. </html>

Así de esta forma, ademas de la barra de desplazamiento del div, me sale la barra de desplazamiento lateral de un tamaño igual al que ocupa el div "arriba"

gracias a todos y perdon por las molestias.