Estoy haciendo una página web y realmente no sé mucho de css ni de html. ¿Cómo hago para mantener el footer siempre al final de la página? Me queda un espacio entre el footer y el final de la página. Agradezco su ayuda.
/*-----------General-----------*/
#pagina {
width: 100%;
margin: 0 auto;
position: relative;
}
/* -----fuente y color del menu ----- */
.menu {
color: #b40404;
font-weight: normal;
font-family: 'Roboto', sans-serif;
font-size: 17px;
line-height: 16px;
}
/* ----- Color del link (titulo) del menu ----- */
.menu a {
color: #b40404;
}
/* ----- Color del título del menú al pasar el ratón por encima----- */
.menu a:hover {
color: #354f83;
}
/* ----------color, fuente tamaño del texto body------------*/
body {
color: #5e5e5e;
font-weight: normal;
font-family: 'Arial', sans-serif;
font-size: 13px;
line-height: 18px;
text-align: left;
/*------------reemplazar imagen cuando este en el servidor----------------*/
background: #e5e2db url("http://dynamic.websimages.com/s/themes/savvy/v1.72/images/simple/bg.png") repeat fixed center 0;
z-index: 1;
}
/* ---------------------------------- Color de los link en body ------------------------------------------*/
body a {
color: #3f5b87;
}
/* -------------------------- Color de los link al pasar el ratón en body ----------------------------------*/
body a:hover {
color: #000000;
}
/* ------------------------------------------ general ----------------------------------------------- */
a {
text-decoration: underline;
outline: none;
}
a:hover {
text-decoration: none;
}
p {
padding: 0 0 20px;
}
.interno {
width: 950px;
margin: 0 auto;
background: #ffffff none repeat fixed center 0;
-moz-box-shadow: 0 0 5px #555555;
-webkit-box-shadow: 0 0 5px #555555;
box-shadow: 0 0 5px #555555;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: relative;
top: 8px;
height: auto;
}
.externo {
width: 966px;
margin: 0 auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #c5beaf;
background: rgba(154, 143, 115, 0.15);
}
/* ---------------------------------- Header ----------------------------------------------*/
header.header {
width: 100%;
/*height: 130px;*/
position: relative;
}
/*.header-area {
width: 950px;
height: 130px;
margin: 0 auto;
z-index: 1;
overflow: visible;
}
.w-header-area {
min-height: 130px;
}*/
/* ---------------------------------- Nav y menu ------------------------------------------*/
.cabecera-menu {
height: 90px;
position: relative;
margin: 0 auto 10px;
width: 966px;
}
.cabecera-menu {
width: 966px;
}
.interno-cabecera-menu {
width: 920px;
height: 74px;
position: relative;
margin: 0 auto;
top: 8px;
padding: 0 15px;
}
#caja-nav>ul {
list-style: none;
position: relative;
top: 0;
z-index: 20;
}
#caja-nav>ul>li {
float: left;
padding: 15px 15px;
margin-top: 14px;
position: relative;
/* -- Este es el espacio entre dos items del menu -- */
margin-left: -5px;
}
#caja-nav>ul>li>a {
display: block;
text-decoration: none;
}
#caja-nav>ul>li.active,
#caja-nav>ul>li.child-active {
color: #FFFFFF;
display: block;
outline: medium none;
border: 1px solid #161616;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #4d71b7;
background-image: -moz-linear-gradient(top, #4d71b7, #354f83);
background-image: -o-linear-gradient(top, #4d71b7, #354f83);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4d71b7), color-stop(1, #354f83));
background-image: -webkit-linear-gradient(#4d71b7, #354f83);
background-image: linear-gradient(top, #4d71b7, #354f83);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d71b7', endColorStr='#354f83');
}
#caja-nav>ul>li.active>a,
#caja-nav>ul>li.child-active>a {
color: #ffffff;
}
/* ---------------------------------- Main ----------------------------------------------*/
.contenedor {
min-height: 460px;
position: relative;
width: 966px;
margin: 0 auto 10px;
clear: both;
}
.contenido-ancho {
width: 966px;
min-height: 460px;
}
.contenido-ancho-interno {
min-height: 404px;
padding: 20px 15px;
width: 920px;
}
/* ---------------------------------- Footer ----------------------------------------------*/
footer {
min-height: 70px;
background-color: #191919;
background-image: -moz-linear-gradient(top, #191919, #000000);
background-image: -o-linear-gradient(top, #191919, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #191919), color-stop(1, #000000));
background-image: -webkit-linear-gradient(#191919, #000000);
background-image: linear-gradient(top, #191919, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#191919', endColorStr='#000000');
border-top: 1px solid rgba(50, 50, 50, 0.3);
width: 100%;
position: relative;
clear: both;
margin-top: 0px;
padding-top: 0px;
overflow: visible;
}
.footer {
border-top: 1px solid #222;
}
.post-footer {
width: 950px;
margin: 0 auto;
}
<div id="pagina">
<header class="header">
<div class="header-area">
<section>
<!-- <h2>Titilo de contenido</h2>
<p class="sub-header"> Contenido </p> -->
</section>
</div>
</header>
<div class="externo cabecera-menu">
<div class="interno interno-cabecera-menu">
<nav id="caja-nav">
<ul class="menu">
<li class="active"><a href="home.html" title="Home"><span class="title">Home</span><span class="after"></span></a></li>
<li><a href="ofertas.html" title="Ofertas"><span class="title">Ofertas</span><span class="after"></span></a></li>
<li><a href="fonendos.html" title="Fonendos"><span class="title">Fonendos</span><span class="after"></span></a></li>
<li><a href="oximetros.html" title="Oximetros"><span class="title">Oximetros</span><span class="after"></span></a></li>
<li><a href="articulos-y-accesorios.html" title="Articulos y Accesorios"><span class="title">Articulos y Accesorios</span><span class="after"></span></a></li>
<li><a href="repuestos.html" title="Repuestos"><span class="title">Repuestos</span><span class="after"></span></a></li>
<li><a href="hacer-pedido.html" title="Hacer Pedido"><span class="title">Hacer Pedido</span><span class="after"></span></a></li>
<li><a href="faq.html" title="Faq"><span class="title">Faq</span><span class="after"></span></a></li>
</ul>
</nav>
</div>
</div>
<div class="contenedor">
<div class="contenido-ancho externo">
<div class="contenido-ancho-interno interno">
<article>
<h1>Mi sitio web</h1>
<p>Mi sitio web creado en html5</p>
<a href="www.google.com">google 1</a>
<a href="www.google.com">google 2</a>
</article>
</div>
</div>
</div>
<!-- <section>
<article>
<br>
<h2>Titulo del articulo</h2>
<p>Aqui va el artículo</p>
<img src="images/logo.png">
</article>
</section>
<aside>
<h2>ASIDE</h2>
<p>Puede haber mas de uno y se les da formato diferente asignándoles ID o CLASS con CSS</p>
</aside>-->
</div>
<footer class="footer">
<div class="post-footer">
¿Cómo hago para mantener el footer pegado abajo siempre?
</div>
</footer>