Foros del Web » Creando para Internet » CSS »

Divs con mezcla de tamaños

Estas en el tema de Divs con mezcla de tamaños en el foro de CSS en Foros del Web. No se si el titulo esta muy acertado. Tengo el siguiente esquema de divs Código: <div> <------- tamaños en % <div> cabecera </div> <div> cuerpo ...
  #1 (permalink)  
Antiguo 26/08/2009, 07:46
 
Fecha de Ingreso: noviembre-2008
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 0
Divs con mezcla de tamaños

No se si el titulo esta muy acertado.

Tengo el siguiente esquema de divs

Código:
<div>         <------- tamaños en %
   <div>
      cabecera
   </div>
   <div>
      cuerpo
      <div>
          contenido
      </div>
   </div>
</div>
como puedo hacer para que la cabecera tenga un tamaño determinado y el cuerpo ocupe todo el resto de espacio vacio con un scroll para que si el contenido se desvorda se muestre.

Digamos que todo lo tengo claro excepto como hacer que el cuerpo ocupe todo lo que le sobra al div principal

Un saludo
  #2 (permalink)  
Antiguo 26/08/2009, 08:49
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Divs con mezcla de tamaños

probaste con ponerle

overflow:auto;height:100%???

__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 26/08/2009, 09:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Divs con mezcla de tamaños

Mira a ver si lo siguiente se ajusta a lo que buscas:
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. <title>Mikmoro y Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin:0;padding:0; border:0; outline:none;}
  7. html, body { height: 100%;
  8. overflow: hidden;
  9. margin: 0;
  10. font-family: monospace;
  11. }
  12. #arriba {
  13. background-color: #f60;
  14. position: relative;
  15. height: 50px;
  16. font-size: 2em;
  17. text-align: center;
  18. }
  19.  
  20. #abajo { background-color: #6699FF;
  21. overflow: auto;
  22. position: absolute;
  23. width: 100%;
  24. top: 50px;
  25. bottom: 0;
  26. font-family: verdana;
  27. }
  28. </head>
  29. <div id="arriba">
  30. SOY LA CABECERA
  31. </div>
  32. <div id="abajo">
  33. Añadir contenido hasta que tenga más altura que la pantalla
  34. </div>
  35. </body>
  36. </html>

Fíjate en la coincidencia entre la altura de #arriba y el valor de 'top' en #abajo

Crédito: Basado en una realización de Mikmoro.
En este momento ya no se qué habré modificado, quitado o añadido, pues lo he reutilizado para varios ejemplos distintos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 27/08/2009, 01:38
 
Fecha de Ingreso: noviembre-2008
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Divs con mezcla de tamaños

pues firefox si que lo coge bien, pero ie6 no me muestra scroll y si le pongo overflow scroll lo renderiza como si por debajo se saliera y desabilitado... muy raro, pero gracias a ver si hay alguna manera de solucionar eso.
  #5 (permalink)  
Antiguo 27/08/2009, 06:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Divs con mezcla de tamaños

¿Viste el crédito a Mikmoro y mi aviso de reutilización?
Pues seguro que en unas de esas suprimí las propiedades que lo hacía compatible con ie6
Pasa por www.araudi.net y busca el original, seguro que ese sí funciona para "esa cosa"

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 31/08/2009, 06:00
 
Fecha de Ingreso: noviembre-2008
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Divs con mezcla de tamaños

Pues lo he provado y tampoco funciona... he trasteado un monton y no tengo claro que se pueda hacer lo que quiero...
  #7 (permalink)  
Antiguo 31/08/2009, 06:41
 
Fecha de Ingreso: diciembre-2007
Mensajes: 104
Antigüedad: 10 años
Puntos: 4
Respuesta: Divs con mezcla de tamaños

Lo que te recomiendo es que el cuerpo, lo pongas FUERA del div contenedor del header que tiene un tamaño especifico..
Podrías crear un div para el cuerpo con width 100% .. debajo del header.. y meterle un IFRAME para solucionar tu tema del scroll...

Espero te sirva..
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




La zona horaria es GMT -6. Ahora son las 23:44.