Divs con mezcla de tamaños

cojonuo · #1 (**permalink**) 26/08/2009, 06:46

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

emiliodeg · #2 (**permalink**) 26/08/2009, 07:49

probaste con ponerle

overflow:auto;height:100%???

kseso? · #3 (**permalink**) 26/08/2009, 08:20

Mira a ver si lo siguiente se ajusta a lo que buscas:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Mikmoro y Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none;}
html, body { height: 100%;
overflow: hidden;
margin: 0;
font-family: monospace;
}
#arriba {
background-color: #f60;
position: relative;
height: 50px;
font-size: 2em;
text-align: center;
}
 
#abajo { background-color: #6699FF;
overflow: auto;
position: absolute;
width: 100%;
top: 50px;
bottom: 0;
font-family: verdana;
}
</style>
</head>
<body>
<div id="arriba">
SOY LA CABECERA
</div>
<div id="abajo">
Añadir contenido hasta que tenga más altura que la pantalla
</div>
</body>
</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.

cojonuo · #4 (**permalink**) 27/08/2009, 00:38

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.

kseso? · #5 (**permalink**) 27/08/2009, 05:02

¿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

cojonuo · #6 (**permalink**) 31/08/2009, 05:00

Pues lo he provado y tampoco funciona... he trasteado un monton y no tengo claro que se pueda hacer lo que quiero...

nakiox · #7 (**permalink**) 31/08/2009, 05:41

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..