CSS - Ayuda con layout

   
Vista:

Ayuda con layout

Publicado por Oscar Nevarez Sosa (2 intervenciones) el 13/03/2011 23:10:55
Hola,

Estoy haciendo una web... quiero que tenga un encabezado y pie de pagina... y el contenido entre ambos... eso se hacerlo... pero el problema es que cuando el contenido no supera el alto del navegador, el alto de la pagina queda muy chico...

entonces en ese caso, me gustaria que el pie de pagina quede pegado abajo en la ventana, pero si se supera el alto del navegador, quiero que se mueva junto con el contenido...

se CSS y he realizado varias templates pero no logro hacer que esto funcione...

Desde ya muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Ayuda con layout

Publicado por DerangedMX (39 intervenciones) el 22/08/2011 19:09:36
Hola Oscar,

para este tema suelo emplear "Sticky footer", una solución que ofrece CSS Tricks, su código es el siguiente:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
* { margin:0; padding:0; }
 
html, body, #wrap { height: 100%; }
 
body > #wrap {height: auto; min-height: 100%;}
 
#main { padding-bottom: 150px; }  /* must be same height as the footer */
 
#footer {
        position: relative;
        margin-top: -150px; /* negative value of footer height */
        height: 150px;
        clear:both;}
 
/* CLEAR FIX*/
.clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


HTML
1
2
3
4
5
6
7
8
9
10
11
<div id="wrap">
 
        <div id="main" class="clearfix">
 
        </div>
 
</div>
 
<div id="footer">
 
</div>


En esta URL está el resultado: ejemplo Sticky footer

Espero sea de utilidad, saludos!
certificados ssl
protocolo ssl
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar