Skip to main content
se añadieron 974 caracteres en el cuerpo
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Tendrías que modificar lo siguiente:

body{
  margin: 0;   /* NUEVO */
}

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;            ELIMINADO
  padding-top: 0px;
  overflow: visible;*/
  position: fixed;
  bottom: 0;              /* NUEVO */
}

Tendrías que modificar lo siguiente:

body{
  margin: 0;   /* NUEVO */
}

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;            ELIMINADO
  padding-top: 0px;
  overflow: visible;*/
  position: fixed;
  bottom: 0;              /* NUEVO */
}
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Si quieres que el footer SIEMPRE se mantenga en la parte inferior de la pantalla entonces lo más sencillo (y lo que no he visto en ninguna de las respuestas que te han dado hasta el momento) es cambiarle la propiedad position para que sea fija e indicarle que siempre se muestre en la parte inferior de la pantalla (con la propiedad bottom: 0).

También podrás observar que en el lado tanto izquierdo como derecho de la página web el footer no llega a tocar los laterales. Esto se debe a que la etiqueta body tiene un margen por defecto. Si se lo asignamos a 0 ya no verás estos huecos en ambos laterales.

Tu ejemplo corregido:

body{
  margin: 0;   /* NUEVO */
}

/*-----------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;            ELIMINADO
  padding-top: 0px;
  overflow: visible;*/
  position: fixed;
  bottom: 0;              /* NUEVO */
}

.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>