sábado 14 de enero de 2012

100% del Header y Footer

En este tema solo trabajaremos con HTML y CSS para algunos se nos hace difícil crear este tipo de paginas donde el foot y el header son 100% mientras el contenido es centrado o de un tamaño especifico. Todo esto solo lo haremos con div.

HTML:
<div id="container">

   <div id="header"></div>

   <div id="body"></div>

   <div id="footer"></div>

</div>



Ahora creamos nuestro css:
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#contenedor {
    min-height: 100%;
    position: relative;
}
#header {
    fondo: # H0;
    padding: 10px;
}
#cuerpo {
    padding: 10px;
    padding-bottom: 60px; / * Altura del pie de página * /
}
#footer {
    position: absolute;
    inferior: 0;
    width: 100%;
    height: 60px; / * Altura del pie de página * /
    fondo: # 6cf;
}




Y una sencilla regla CSS para IE 6 e IE 5.5:

#container 
{ 

  height:100%; 

}

Espero le ayudara en algo cualquier dura no dude en comentar :D


Related Posts Plugin for WordPress, Blogger...