¿Cómo situar el footer siempre abajo?

Сеть Estoy haciendo una página y realmente никакой sé mucho de css ni de html. ¿Cómo hago para mantener el footer siempre al final de la página? Я queda ООН espacio пещера el нижний колонтитул y el final de la página. Agradezco su ayuda.

Me queda así

/*-----------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>
6
задан 13.07.2017, 20:59
0 ответов