Ayuda. Situar el footer siempre abajo

eridamega

Lanero Reconocido
17 Mar 2006
1,339
Amigos necesito su ayuda.
Estoy haciendo una pagina quizas tenga muchos errores porque no se mucho css ni html.
como hago para mantener el footer siempre al final de la pagina ??
Agradezco su ayuda
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
        <meta charset="utf-8"/>
        <title>XXX</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <link rel="shortcut icon" href="favicon"/>
        
</head>
<body>
<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">
                Como hago para mantener el footer pegado abajo siempre
            </div>
        </footer>

</body>
</html>
Código:
/*-----------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 titulo del menu al pasar el raton 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 raton 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;
}
 
Probaste cambiando del spoiler.css la posición

Cambia esto:

position: relative;
a
position: absolute;

Cuéntame si te funciona así
 

Los últimos mensajes

Los últimos temas