10

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.

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>

2
  • 1
    Gracias, realmente me todos me fueron de mucha ayuda.
    – Daniel
    Commented el 10 abr. 2017 a las 12:29
  • 1
    conseguiste solucion? la cosa es que todos mandan a hacer un bottom 0; o el fixed, pero ami eso no me funciona , pues supongamos q ven la pagina desde una tablet (horizontalmente) y la rotan(verticalmente) el bottom 0, no se ajusta a la nueva posicion, y el fixed tapa el contenido de la pagina si este llega hasta abajo... alguna idea? Commented el 30 dic. 2017 a las 14:17

7 respuestas 7

7

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.

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 */
}

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>

3
  • 1
    Claro, pero es que el no lo quiere fija. el lo que quieres que cuando la pagina tenga poco contenido y que no ocupe la pantalla completa! el footer se mantenga en la parte inferior y no a continuación del contenido. Commented el 5 abr. 2017 a las 20:14
  • 1
    @Franklin'jGil'z ¿Y cuando el contenido ocupe toda la pantalla que quede debajo de el? Sinceramente no creo que quede claro al 100% por lo que mantendré la respuesta hasta que el OP nos saque de dudas. Commented el 5 abr. 2017 a las 21:24
  • 1
    Yo entendi que el footer esté siempre al bottom cuando el contenido no ocupe el 100% de la pantalla!! y de verdad no tiene sentido que el footer este fijo en el bottom. Commented el 7 abr. 2017 a las 13:16
3

Intenta poner en el css en footer esto

.footer {
    bottom: 0;
}
2

Prueba añadiendo la propiedad top en los estilos de footer y poniendo position:absolute, lo deja como tú buscas:

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: absolute;
  clear: both;
  margin-top: 0px;
  padding-top: 0px;
  overflow: visible;
  top:93%;
} 
2

Prueba en añadir esta propiedad al footer, a mi me funciona

footer{
    clear: both;
}
2

Agrega min-height: 100vh y position: relative a tu contenedor en CSS.

.contenedor {
 min-height:100vh;/*importante*/
 position:relative;/*importante*/
 border:2px solid blue;
}

footer{
 background-color:red;
 color:white;
 padding:15px;
}

/*coloca esto si deseas eliminar el margen*/
body {
 margin:0;
}
<body>
 <div class="contenedor">
 *******AQUI DEBES COLOCAR TU CONTENIDO******
 </div>
 <footer>
 ESTO ES EL FOOTER
 </footer>
</body>
   

1

Este es el css

body{
    min-height: 100%;
    top: 0;
    margin:0;
    padding:0;
}

footer,
section#main,
body{
    width: 100%;
    position: absolute;
}

section#main{
    min-height: 100%;
}

footer{
    bottom: 0;
}

y este es el HTML

<body>
    <section id="main">
        <!-- todo el codigo -->
        <footer>
            Codigo del footer
        </footer>
    </section>
</body>
1
.footer{
    
  position:static; /*mantener el footer abajo*/
  bottom: 0;
}
1
  • Gracias por tu contribución c: Vendría genial tanto para el OP como para otras personas que vean tu respuesta en el futuro que agregases una explicación de lo que hace tu respuesta.
    – Dante S.
    Commented el 17 jun. 2021 a las 12:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.