Re: [Ovillo] Extender DIV hasta ocupar todo el contenido

Mon, 18 Jun 2007 06:38:07 -0700 

Hola sn y demás listeros:
He probado lo que me dices y al parecer tengo algo mal y no logro encontrar que 
cosa es. Ahora hice algunos cambios porque mi plantilla (layout) no es igual al 
del ejemplo, sino que antes de las 3 columnas lleva una cabecera. Aquí les dejo 
el CSS y el HTML para que prueben y vean lo que me pasa.

<!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"; xml:lang="sp" lang="sp">
<head>
        <title>Probando columnas</title>
        <meta http-equiv="Content-Type" content="text/html charset=iso-8859-1"/>
        <script type="text/javascript" 
src="assets/script/simpro/fillheight.js"></script>
        <style type="text/css">
        body{
                margin:0 auto;
        }
        #contenedor_principal{
                overflow:hidden;
        }
        #contenido_central{
                background-color:red;
                width:20%;
                float:left;
                margin-bottom:-5000px;
                padding-bottom:5000px;
         }
        #columna_derecha{
                background-color:blue;
                width:60%;
                float:left;
                margin-bottom:-5000px;
                padding-bottom:5000px;
         }
        #pie_de_pagina{
                height:40px;
                clear:both;
                float:none;
                background-color:black;
                color:white;
                width:100%;
        }
        </style>
</head>
<body onload="fillthescreen()">
<div id="contenedor_principal">
        <div id="cabecera">
                <div id="registro">Registro de usuarios</div>
        </div>
        <div id="navegacion">Navegacion</div>
        <div id="contenido_central">algo</div>
        <div id="columna_derecha">columna derecha</div>
        <div id="pie_de_pagina">pie de pagina</div>
</div>
</body>
</html>

El JS lo he modificado de la siguiente manera para adapatarlo a mis selectores:
function fillthescreen(){
        winH = windowHeight(); //This returns the screen heigth
        heightNeeded=winH-40; //We need to substract the footer height
        if( typeof( window.innerWidth ) != 'number' ) { //Explorer doesn't 
recognize minHeight
                
document.getElementById('contenido_central').style.height=heightNeeded+'px'; 
//So, we use height (and explroer bug)
        }
        
document.getElementById('contenido_central').style.minHeight=heightNeeded+'px'; 
//For every other browser, we use minHeight
}

function windowHeight(){
        var alto= 0;
        if( typeof( window.innerWidth ) == 'number' ) {
                alto= window.innerHeight;
        } else if( document.documentElement && ( 
document.documentElement.clientWidth || document.documentElement.clientHeight ) 
) {
                alto= document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || 
document.body.clientHeight ) ) {
                alto= document.body.clientHeight;
        }
        return alto;
}

¿Qué estoy haciendo mal?
Salu2 y desde ya gracias
Reynier Pérez Mira
5to. año Ing. Informática
Universidad de las Ciencias Informáticas

> -----Original Message-----
> From: [EMAIL PROTECTED] [mailto:ovillo-
> [EMAIL PROTECTED] On Behalf Of sn
> Sent: Monday, June 18, 2007 3:35 AM
> To: Ovillo, la lista de CSS en castellano
> Subject: Re: [Ovillo] Extender DIV hasta ocupar todo el contenido
> 
> salud reynier, precisamente éstos días he estado buscando algo parecido a
> lo
> que comentas.
> si buscas un hilo llamado "diseño a 3 columnas" verás las conclusiones a
> las
> que allí se llegaron.
> al final se utilizó javascript para estirar las columnas ya que parece que
> es imposible hacerlo solamente con css.
> 
> un saludo y espero que te sirva.
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> 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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a