Pie de página en la parte inferior de la página o del contenido, lo que sea más bajo

Resuelto Will asked hace 12 años • 5 respuestas

Tengo la siguiente estructura:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Cargo contenido dinámicamente usando <article>javascript. Debido a esto, la altura del <article>bloque puede cambiar.

Quiero que el <footer>bloque esté en la parte inferior de la página cuando hay mucho contenido, o en la parte inferior de la ventana del navegador cuando solo existen unas pocas líneas de contenido.

De momento puedo hacer uno u otro... pero no ambos.

Entonces, ¿alguien sabe cómo puedo hacer esto? Hacer que se <footer>quede en la parte inferior de la página/contenido o en la parte inferior de la pantalla, dependiendo de cuál sea más bajo.

Sep 03 '12 02:09 Will

Aceptado

El pie de página adhesivo de Ryan Fait es muy bonito, sin embargo, creo que falta su estructura básica*.

Versión de caja flexible

Si tiene la suerte de poder usar flexbox sin necesidad de admitir navegadores más antiguos, los pies de página adhesivos se vuelven trivialmente fáciles y admiten un pie de página de tamaño dinámico.

El truco para lograr que los pies de página se adhieran a la parte inferior con flexbox es hacer que otros elementos en el mismo contenedor se flexionen verticalmente. Todo lo que se necesita es un elemento contenedor de altura completa con display: flexal menos un hermano con un flexvalor mayor que 0:

_CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

article {
  flex: 1;
}

Mostrar fragmento de código

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expand snippet

Si no puedes usar flexbox, mi estructura base de elección es:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Lo cual no está tan lejos de:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

El truco para lograr que el pie de página se mantenga fijo es anclarlo al relleno inferior de su elemento contenedor. Esto requiere que la altura del pie de página sea estática, pero he descubierto que los pies de página suelen tener una altura estática.

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS:

#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Mostrar fragmento de código

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expand snippet

Con el pie de página anclado a #main-wrapper, ahora debe #main-wrappertener al menos la altura de la página, a menos que sus elementos secundarios sean más largos. Esto se hace haciendo que #main-wrappertenga un min-heightof 100%. También debes recordar que sus padres htmldeben bodyser tan altos como la página.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Mostrar fragmento de código

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expand snippet

Por supuesto, deberías cuestionar mi criterio, ya que este código obliga a que el pie de página caiga del final de la página, incluso cuando no hay contenido. El último truco consiste en cambiar el modelo de caja utilizado por #main-wrapperpara que min-heightincluya 100%el 100pxrelleno.

_CSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

Mostrar fragmento de código

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Expand snippet

Y ahí lo tienes, un pie de página adhesivo con tu estructura HTML original. Solo asegúrese de que footer's heightsea igual a #main-wrapper's padding-bottomy estará configurado.

^{* La razón por la que encuentro fallas en la estructura de Fait es porque establece los elementos .footery .headeren diferentes niveles jerárquicos mientras agrega un .pushelemento innecesario.}

Sep 03 '2012 19:09 zzzzBov

El pie de página adhesivo de Ryan Fait es una solución sencilla que he utilizado varias veces en el pasado.

HTML básico :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Traducir esto para que sea similar a lo que ya tiene resulta con algo como esto:

HTML :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Simplemente no olvide actualizar el negativo en el margen envolvente para que coincida con la altura de su pie de página y presione div. ¡Buena suerte!

Sep 02 '2012 19:09 Josh Mein