Hola,
No se si te he entendido muy bien, pero creo que lo que te pasa es que no
consigues el alto al 100% del elemento padre independientemente del
contenido, no? Y que cuando el contenido es demasiado largo se te sale???
Mira este código, funciona bien en firefox y en ie7, ie6 va a su bola y
habría que darle una css diferente, pero... a ver si te sirve:
<head>
<style type="text/css">
body
{
overflow: hidden;
}
#cabecera
{
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 200px;
background-color: #009933;
}
#lateral
{
position: absolute;
top: 200px;
bottom: 0;
left: 0;
background-color:#003399;
width:200px;
}
#contenido
{
position: absolute;
top: 200px;
bottom: 0;
left: 200px;
background-color:#CC0000;
width:600px;
overflow: auto;
}
p
{
text-align:center;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="cabecera"></div>
<div id="lateral"></div>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan
arcu in nisi. Maecenas nec est. Mauris ac mi id leo vulputate posuere. Sed
in lorem id dui vestibulum semper. Sed condimentum tincidunt arcu. Fusce
risus. Mauris fermentum, pede sit amet sodales euismod, pede augue interdum
libero, id euismod est leo nec massa. Vivamus odio tellus, fermentum
euismod, rutrum in, molestie ut, dolor. In venenatis mi vitae lorem.
Suspendisse pharetra vulputate quam. Duis porttitor. Aenean mi metus, cursus
eu, tincidunt et, molestie a, nisl. Praesent quis felis. Cras fermentum.</p>
<p>Curabitur laoreet sapien in lorem. Nulla euismod placerat velit. Donec
egestas elit ac felis. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Maecenas vitae nulla. Proin luctus lacinia
orci. Phasellus in lectus id felis iaculis volutpat. Sed at sapien.
Phasellus eleifend, erat porttitor condimentum euismod, justo lectus
volutpat sem, eget consequat nibh justo eu turpis. Fusce a justo.
Suspendisse scelerisque. Nunc ipsum velit, scelerisque ac, pharetra vitae,
blandit ac, nulla. Sed leo mi, pulvinar sit amet, luctus nec, gravida vel,
magna.</p>
<p>Nam velit. Sed adipiscing justo et eros. Maecenas viverra pede porta
lectus. Maecenas justo mi, rutrum faucibus, vehicula in, ornare et, pede.
Praesent ac sapien. Mauris ut lectus a lacus euismod tincidunt. Mauris
laoreet accumsan nisi. Mauris lacus. Phasellus justo tellus, rutrum tempor,
tristique nec, ornare at, diam. Proin magna. Cras a est eget metus commodo
tempus. Duis lorem. Etiam dignissim enim ut diam rutrum nonummy. Quisque
urna sapien, pretium bibendum, tincidunt eget, fringilla a, pede.</p>
<p>Maecenas massa purus, pulvinar non, auctor id, feugiat sed, lectus.
Suspendisse quam urna, ultricies quis, cursus et, luctus ac, ligula. Nulla
aliquam quam nec nisl. Suspendisse volutpat cursus ligula. In eget massa
vitae felis fringilla consectetuer. Vivamus nunc. Phasellus rhoncus urna
vitae odio. Cras turpis. Sed sem. Vivamus nisi nunc, rhoncus vel, porttitor
condimentum, scelerisque sed, odio. Ut semper porta libero. Nulla faucibus,
quam faucibus gravida egestas, nunc velit rhoncus odio, ut tincidunt augue
nibh eget mi. Cras sodales. Etiam vel turpis. Quisque quam ligula, sagittis
non, tincidunt nec, ullamcorper nec, ligula. Etiam tempus, mi vel
condimentum dignissim, purus velit eleifend risus, sed dignissim dolor nisi
bibendum massa. Donec fermentum magna hendrerit lorem. Curabitur eu leo eu
nisi facilisis lacinia. Duis laoreet feugiat lacus.</p>
<p>Sed quis sem nec libero laoreet dapibus. Integer purus nibh, gravida
eget, bibendum vitae, mattis non, justo. Suspendisse potenti. Proin gravida.
Nullam viverra eleifend odio. Donec dictum, orci et laoreet tincidunt, mi
diam vehicula nisi, ut vehicula augue mauris eget felis. Donec tellus neque,
euismod auctor, pulvinar ac, mattis vitae, tortor. In accumsan condimentum
tellus. Pellentesque nec nisi. Nulla nunc. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec volutpat. Donec
sed est. Integer vitae dui in est condimentum malesuada. Mauris dui. Integer
sem risus, placerat et, congue ac, faucibus nec, est. Fusce non tortor.
Donec tempus nisi vehicula quam. Ut gravida laoreet ante. Etiam
consectetuer, neque ut pellentesque sodales, ante purus condimentum quam, id
lobortis felis mi quis nisi.</p>
</div>
</body>
Saludos
Rafa
biosfera 4
diseño y desarrollo web
c/ Andrés Segovia 3 1ºB
28230 Las Rozas de Madrid
tel. 916375147
fax. 916375147
http://www.biosfera4.com
[EMAIL PROTECTED]
>
> hola a todo el mundo.
> tengo un problema que no soy capaz de solucionar. ya estoy cansada de buscar
> por google. ni siquiera se si estoy buscando bien. vamos a ver si alguien me
> puede ayudar:
>
> para que os hagais una idea, es similar a esta imagen que encontré:
> http://www.grmn.ws/images/css_final.jpg
>
> esta es mi página:
> 3 divs. el primero es "cabecera" de ancho y alto fijos. el segundo y el
> tercero son "lateral" y "contenido" de ancho fijo y alto 100% (tengan o no
> tengan contenido). todo esto dentro de un div contenedor de ancho fijo y
> altura variable (mínimo 100%). optimizado para internet explorer y mozilla
> firefox.
>
> el problema:
> la altura supera el 100%. ¿cuanto más? el alto de la cabecera. si elimino la
> cabecera todo va bien. pero la necesito.
>
> probé con "position:fixed;" y con "overflow:hidden;" pero si crece el
> contenido de la página el scroll no aparece y no se ve todo el contenido.
> ya no se me ocurre que hacer, a ver si me dais una pista, ¿nadie ha tenido un
> problema similar? ¿hay algún ejemplo que pueda ver?
>
> muchas gracias
>
>
> REDACTED
>
> _________________________________________________________________
> Express yourself instantly with MSN Messenger! Download today it's FREE!
> http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
