Hacer que div se pegue al final de la página

4 minutos de lectura

avatar de usuario
mheonyae

Así que hice una página de contacto y quiero el pie de página. div adherirse al final de la página, no justo después del formulario de contacto.

Pero si pongo todo en un contenedor div con height:100%; y hacer pie de página bottom:0; entonces la página será “demasiado larga”, tendrás que desplazarte, etc…

Mi css hasta aquí:

#footer{
    background-color:#fff;
    font:bold 14px;
    color:#1E88E5;
    width:100%;
    height:auto;
    padding:1%;
    border-top:1px solid #1E88E5;
}

El pie de página es solo un ancho completo normal div con algo de texto centrado atm.

  • ¿Quieres que el pie de página sea visible sin necesidad del scroll?

    – Donnie D’Amato

    23 de agosto de 2016 a las 11:02

  • Posible duplicado de: hacer que div permanezca en la parte inferior del contenido de la página todo el tiempo, incluso cuando hay barras de desplazamiento

    – AlexG

    23 de agosto de 2016 a las 11:06

  • no quiero que esté siempre visible en la parte inferior… quiero que se pegue al final de la página, pero en caso de que la página se haga “más larga”, se desplazará hacia abajo y luego verá el pie de página

    – mheonyae

    23 de agosto de 2016 a las 11:43

Probablemente puedas usar position: fixed lograr esto.

.footer {
  position: fixed;
  bottom: 0;
}

Con esto, deberá compensar la parte inferior de la página, por lo que sugeriría agregar un padding-bottom a .main esa es la altura del pie de página.

.main {
  padding-bottom: 30px /*whatever the height of your footer is*/
}

La solución de Pritesh Gupta funciona muy bien para mí:

Estoy copiando y pegando el código en caso de que su sitio se caiga:

Aquí está el HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Footer</title>
  </head>

  <body>
    <main>stuff</main>
    <footer>&copy; 2016</footer>
  </body>
</html>

Aquí está el CSS:

body {
  margin: 0;
}

main {
  min-height: calc(100vh - 4rem);
}

footer {
  height: 4rem;
}

No sé si funciona en navegadores antiguos, pero a mí tampoco me preocupa tanto.

También depende de que sepa la altura de su pie de página, aunque vale la pena señalar que no necesariamente tiene que configurar la altura manualmente como en el código anterior, ya que siempre puede averiguar cuál es si sabe cuánto relleno vertical. y la altura de línea que tienen los contenidos…

Espero que esto ayude, pasé la mayor parte de la mañana probando cada tutorial de pie de página fijo en la web antes de tropezar con esta técnica y mientras otro Las técnicas funcionan, esta requiere un esfuerzo mínimo.

avatar de usuario
Mohammad Reza Mahmoudi

Si necesita un pie de página adhesivo, puede hacerlo con 2 soluciones.

Solución 1:

HTML:

<div class="wrap">
    Content
</div>
<div class="footer">
    Sticky Footer
</div>

CSS:

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

Ejemplo: https://jsfiddle.net/ta1amejn/


Solución 2 (Con propiedades de tabla):

HTML: pie de página de contenido

CSS:

body{
    display:table;
    width: 100%;
}

html, body{
    height:100%;
}

.main{
    height:100%;
    width:100%;
    padding-bottom:20px;
    background:#eee;
    display:table-row;
}

.footer{
    /*height:30px;*/
    line-height:30px;
    width:100%;
    background:#00f0ad;
    display:table-row;
}

Ejemplo: https://jsfiddle.net/zbtaoq1b/


Si desea un pie de página fijo, use esta solución:

.footer{
    position: fixed;
    bottom: 0;
}

Puedes hacerlo fácilmente con el display: flex. No te importa la altura body o wrapper etiqueta.

Ejemplo: Por favor cambie la altura de main tag cualquier valor si quieres, footer siempre pegajoso al fondo (no position: fixed).

https://codepen.io/tronghiep92/pen/dzwRrO

marcado HTML

<div id="wrapper">
   <header>my header</header>
   <main>main content, please change height</main>
  <footer>
    my footer
  </footer>
</div>

Solución CSS

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
  margin-top: auto; /* this is the solution */
}

main {
  height: 100px
}

O tu puedes:

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
}

main {
  flex: 1;
  height: 100px;
}

¿Ha sido útil esta solución?