Hacer una pregunta

Como hacer que mi footer quede siempre en la parte de abajo sin importar el contenido de mi página?

+1 voto
por (150 puntos) en CSS
Hola amigos del foro, como mi pregunta indica me gustaría saber si conocen algún metodo para hacer que el footer siempre permanezca abajo sin importar el contenido en la página, he probado de muchas maneras distintas y cuando creo haber conseguido el objetivo, me muevo a otra parte de mi página y el footer no deja ver el resto del contenido, espero hacerme enteder, agradecería mucho que pudieran darme algún consejo acerca de esto o si pueden brindarme ayuda con algún tutorial con el que pueda resolver mi problema, muchas gracias de antemano, saludos.

4 Respuestas

+1 voto
por (200 puntos)
necesitas Mostrar el codigo para ver que es lo que quieres hacer y porque no te esta funcionando

gracias.....
por (150 puntos)
Hola heriberto, si mira este es el footer que trato de hacer basándome un poco de materialize

#HTML
<div id="footer" class="page-footer2">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Footer Content</h5>
                    <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
            </div>
            <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Redes Sociales</h5>
            <ul>
                <li><a class="grey-text text-lighten-3" href="#!">Facebook</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Twitter</a></li>
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            Todos los derechos reservados © 2016 Copyright Text
            <a class="grey-text text-lighten-4 right" href="#!">Dylan Pabón</a>
        </div>
    </div>
</div>

#CSS
html, body{
 height: 100%;
 font-family: lato;
}
#footer{
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 205px;
}
.page-footer2 {
  position: absolute;
  margin-top: 20px;
  padding-top: 20px;
  background-color: #038c73;
}
.page-footer2 .footer-copyright {
  
  height: 50px;
  line-height: 50px;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(51, 51, 51, 0.08);
}

Si encuentras algo que este mal o conoces una mejor forma de hacerlo, te agradecería enormemente la ayuda, saludos y gracias de antemano.
+1 voto
por (5.4k puntos)

Deja que el footer sea relativo, en vez de absoluto (position: absolute;) y con que le pongas un ancho del 100% siempre lo tendrás al final de la página.

#footer {
 width: 100%;
 height: 205px;
}

Espero que te sirva.

por (150 puntos)
editado por
Hola victor, ya probé de esa manera y si el footer me lo posiciona en la parte de abajo cuando tengo bastante texto, pero cuando el texto a mostrar en pantalla es pequeño el footer se sube
por (5.4k puntos)
Con el código que te pase el footer siempre se queda pegado al contenido. Si quieres que el footer siempre se quede abajo, independientemente del texto que tengas, te recomiendo que pongas una capa para el contenido la cual la pongas con un tamaño y así siempre tendrás el footer abajo. Ahora te pego el código como respuesta.
0 votos
por (5.4k puntos)

Para que el footer siempre aparezca abajo independientemente de la cantidad de contenido que tengas, ya solo tienes que ver que tamaño le das al contenido.

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.content {
  width:100%;
  height: 400px;
}

.footer {
  width: 100%;
  background-color: #f00;
}
</style>
</head>

<body>

<div class="content">Contenido de la Página.</div>
<div class="footer">Pie de Página</div>

</body>
0 votos
por (40 puntos)
La mejor forma de hacer eso es con flexbox. Un ejemplo podria ser este:

Codigo HTML:

<main>
  <h1>Welcome to FlexWorld</h1>
<p>Flexbox is an incredible technology that allows us align and resize our boxes in new and fantastic ways, never before seen</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo asperiores provident laudantium, ea commodi, rerum nam veniam exercitationem dolor fugit quibusdam similique earum ipsam fugiat consectetur ab ratione illum harum quaerat, voluptates architecto inventore praesentium totam impedit. Illum labore ex hic, aspernatur sunt assumenda officiis praesentium maiores cumque quidem accusamus recusandae nesciunt, fugit, reiciendis non architecto quibusdam. Dignissimos reprehenderit animi, tempore dolore dolor ut excepturi, consequuntur expedita mollitia pariatur tempora et. Sequi cum molestias, ipsam id beatae, quidem. Similique, illum ducimus rerum atque praesentium illo odit quia ea commodi optio nisi quisquam facilis perspiciatis quaerat, et ad mollitia, neque voluptates.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi expedita esse, tempore numquam hic sunt voluptatem. Excepturi dolorem, voluptas error, nesciunt dolor laudantium odio officiis soluta natus corporis, consequuntur quas enim accusantium reprehenderit! Perferendis quisquam ab distinctio, rem necessitatibus voluptates a debitis atque iusto incidunt dolore laudantium eaque perspiciatis iste.</p>
</main>

<footer>
  &copy; Flexbox Inc - 2015
</footer>

Codigo CSS:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  background: #f0f0f0;
}
main {
  padding: 1em;
}
h1 {
  color: steelblue;
}
footer {
  background: #111;
  color: #fff;
  width: 100%;
  text-align: center;
  padding: 1em;
  align-self: flex-end;
}

Este ejemplo lo tomé del curso de Flexbox del Canal de youtube de Escuela Digital.

Preguntas relacionadas

0 votos
0 respuestas
Usar el z-index para un submenú
preguntado por vzazen (20 puntos) Nov 1, 2020 en CSS
0 votos
1 respuesta
No puedo hacer que mi registro se almacene en mi Base de datos
preguntado por Ricardofede27 (100 puntos) Mar 28, 2019 en PHP
0 votos
1 respuesta
Cómo inserto videos en mi web con html sin tener que tenerlos descargados
preguntado por Danver (20 puntos) Feb 26, 2019 en General
Bienvenido a Dudas de Programación, donde puedes hacer preguntas y recibir respuestas sobre los problemas más frecuentes de los lenguajes de programación, frameworks de desarrollo y bases de datos que utilices. Foro de Línea de Código

Categorías

Snow Theme by Q2A Market
Powered by Question2Answer
...