Tema: pagina completa
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/11/2011, 15:47
Avatar de xlos_mas_pro
xlos_mas_pro
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 13 años, 8 meses
Puntos: 11
Pregunta pagina completa
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><!-- cuerpo -->
<div id="box">
box derecho
</div><!-- box -->
<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
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>
  6.             <?php echo $title ?>
  7.         </title>
  8.             <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/truco.css" />
  9.             <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/template.css" />
  10.             <script src="<?php echo base_url(); ?>css/extras/complemento-ie.js" type="text/javascript"></script>
  11.             <script src="<?php echo base_url(); ?>css/extras/res.js" type="text/javascript"></script>
  12.     </head>
  13.     
  14.     <body>
  15.  
  16.         
  17.         <div id="container" class="sombra">
  18.         
  19.                 <header id="cabecera">
  20.                 
  21.                         <div id="logo">
  22.                                 <img src="<?php echo base_url(); ?>css/image/logo.png" width='320px' height='140px' >
  23.                         </div><!-- logo -->
  24.             
  25.                 </header><!-- cabecera -->
  26.             
  27.                 <div id="fila">
  28.                 
  29.                 
  30.                         <div id="cuerpo">
  31.                             <?php echo $contenido; ?>
  32.                         </div><!-- cuerpo -->
  33.                 
  34.                 
  35.                         <nav>
  36.  
  37.                             <br><br><br><br><br><br>
  38.                         
  39.                         </nav><!-- box -->
  40.  
  41.                 </div><!-- fila -->
  42.                 
  43.                 
  44.                 <footer>
  45.                     Pie de la pagina
  46.                 </footer>
  47.  
  48.         </div><!-- container -->
  49.     
  50.     
  51.     </body>
  52. </html>

CSS
Código CSS: 
Ver original
  1. body{
  2.     background: url(image/fondo-web.png) repeat;
  3. }
  4. html,body{
  5.  
  6. margin:0px;
  7.  
  8. height:100%;
  9.  
  10. }
  11. #cabecera{
  12.     overflow:hidden;
  13.     height:180px;
  14.     background:#242C33;
  15.     border-bottom:6px solid #435AFE;
  16.     border-top:6px solid #435AFE;
  17.  
  18. }
  19. #logo{
  20.     margin:10px 0 0 50px;
  21. }
  22. #container{
  23.         height:100%;
  24.     background:#FFF;
  25.     width:1200px;
  26.     margin:0 auto 0 auto;
  27.     color:#000;
  28.     overflow:hidden;
  29. }
  30. #cuerpo{
  31.     background:#FFF;
  32.     width:950px;
  33.     padding:10px;
  34.     float:left;
  35.     color:#000;
  36. }
  37. nav{
  38.     border-left:1px solid #000;
  39.     background:#FFF;
  40.     color:#000;
  41.     float:left;
  42.     width:229px
  43. }
  44. footer{
  45.         position:absolute;
  46.         bottom:0;
  47.     clear:both;
  48.     width:1200px;
  49.     height:100px;
  50.     background:#242C33;
  51.     border-bottom:6px solid #435AFE;
  52.     border-top:6px solid #435AFE;
  53.     
  54. }