pagina completa

xlos_mas_pro · #1 (**permalink**) 20/11/2011, 15:47

Hola a todos y gracias de ante mano tengo el siguiente problema les explico el esquema de mi pagina es:

Cita:

<div id="container">
<header>
logo
</header>
<div id="cuerpo">
cuerpo
</div>
<div id="box">
box derecho
</div>
<footer>
contenido pie
</footer>
</div>

Bueno quiero hacer los siguiente quiero que la el sitio completo ocupe todo el alto del navegador no se si me explico quiero que tenga un alto 100% (el container)
despues quiero hacer que el footer siempre este abajo siempre abajo y lo ultimo es que las columnas de cuerpo y box midan igual siempre independiente del contenido cosa que un div sea igual al que tiene mas contenido

Bueno eso seria se que es igual mucho pedir pero e estado intentando y no me sale por ejemplo puse un

Cita:

html,body{
margin:0;
height:100%;
}
container{
height:100%;

}

con eso hice que el que el container tenga un alto de 100%
pero y despues hice esto con el footer

Cita:

footer{
position:absolute;
bottom:0;
}

con eso hice que el footer estuviera siempre abajo pero cuando le aplico contenido al cuerpo llega hasta al tope de la pagina osea hasta lo que se ve y no me deja bajar para seguir viendo el contenido no se como solucionarlo tenia todo listo pero me fallo el contenido aqui les dejo el codigo original para que vean

HTML

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            <?php echo $title ?>
        </title>
            <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/truco.css" />
            <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/template.css" />
            <script src="<?php echo base_url(); ?>css/extras/complemento-ie.js" type="text/javascript"></script>
            <script src="<?php echo base_url(); ?>css/extras/res.js" type="text/javascript"></script>
    </head>
    
    <body>
 
        
        <div id="container" class="sombra">
        
                <header id="cabecera">
                
                        <div id="logo">
                                <img src="<?php echo base_url(); ?>css/image/logo.png" width='320px' height='140px' >
                        </div><!-- logo -->
            
                </header><!-- cabecera -->
            
                <div id="fila">
                
                
                        <div id="cuerpo">
                            <?php echo $contenido; ?>
                        </div><!-- cuerpo -->
                
                
                        <nav>
 
                            <br><br><br><br><br><br>
                        
                        </nav><!-- box -->
 
                </div><!-- fila -->
                
                
                <footer>
                    Pie de la pagina
                </footer>
 
        </div><!-- container -->
    
    
    </body>
</html>

CSS

Código CSS:

Ver originalbody{
    background: url(image/fondo-web.png) repeat;
}
html,body{
 
margin:0px;
 
height:100%;
 
}
#cabecera{
    overflow:hidden;
    height:180px;
    background:#242C33;
    border-bottom:6px solid #435AFE;
    border-top:6px solid #435AFE;
 
}
#logo{
    margin:10px 0 0 50px;
}
#container{
        height:100%;
    background:#FFF;
    width:1200px;
    margin:0 auto 0 auto;
    color:#000;
    overflow:hidden;
}
#cuerpo{
    background:#FFF;
    width:950px;
    padding:10px;
    float:left;
    color:#000;
}
nav{
    border-left:1px solid #000;
    background:#FFF;
    color:#000;
    float:left;
    width:229px
}
footer{
        position:absolute;
        bottom:0;
    clear:both;
    width:1200px;
    height:100px;
    background:#242C33;
    border-bottom:6px solid #435AFE;
    border-top:6px solid #435AFE;
    
}

C2am · #2 (**permalink**) 20/11/2011, 17:26

Hola
Revisa este link: http://araudi.net/
Sobre todo donde dice:
Columnas equilibradas
Pie siempre Abajo

Saludos