<!DOCTYPE html>
<html lang="es">
<head>
<style>
* { margin: 0;
padding: 0;
}
html,body { height:100%;
}
/* Div que engloba el contenido de la página menos el footer */
#wrapper {
min-height:100%;
}
header { display:block;
background:#ccc;
padding:10px 0px;
}
section { overflow: auto;
/* Definimos el padding inferior:
50px del pie de pagina mas 10px de separacion
*/
padding-bottom: 60px;
/* Definimos un padding superior */
padding-top:30px;
}
footer { position: relative;
/* Altura total del footer en px con valor negativo */
margin-top: -50px;
/* Altura del footer en px. Se han restado los 5px del margen
superior mas los 5px del margen inferior
*/
height: 40px;
padding:5px 0px;
clear: both;
background: #286af0;
text-align: center;
color: #fff;
}
/* Esta clase define la anchura del contenido y la posicion centrada
El contenido queda centrado y limitado, pero la cabecera y el pie
llegan hasta los limites del navegador.
*/
.define { width:960px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class='define'>
<h1>Titulo de la página</h1>
</div>
</header>
<section>
<div class='define'>
<p>GNU/Linux es uno de los términos empleados para referirse a la combinación del núcleo o kernel libre similar a Unix denominado Linux con el sistema GNU. Su desarrollo es uno de los ejemplos más prominentes de software libre; todo su código fuente puede ser utilizado, modificado y redistribuido libremente por cualquiera bajo los términos de la GPL (Licencia Pública General de GNU, en inglés: General Public License) y otra serie de licencias libres.</p>
<br><p>Este ejemplo ha sido desarrollado para La Web del Programador </p>
</div>
</section>
</div>
<footer>
<div class='define'>
<p>Contenido del pie de página</p>
</div>
</footer>
</body>
</html>
Crear cuenta
