Pie de página en la parte inferior de la página o contenido, el que sea inferior

Question 1

Tengo la siguiente estructura:

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

Carga contenido dinámicamente en el <article>uso de 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 haya mucho contenido, o en la parte inferior de la ventana del navegador cuando solo existan unas pocas líneas de contenido.

De momento puedo hacer una u otra ... pero no ambas.

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

Question 2

El pie de página pegajoso de Ryan Fait es muy agradable, sin embargo, encuentro que falta su estructura básica *.

Versión Flexbox

Si tiene la suerte de poder usar flexbox sin necesidad de admitir navegadores 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 hacer que los pies de página se peguen al fondo 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>

Expandir fragmento

Si no puede 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>

Que no está tan lejos de:

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

El truco para hacer que el pie de página se adhiera es tener el pie de página anclado 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>

Expandir fragmento

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 hijos sean más largos. Esto se hace haciendo que #main-wrappertenga una min-heightde 100%. También debe recordar que sus padres, htmly bodydebe ser tan alto 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>

Expandir fragmento

Por supuesto, debería cuestionar mi juicio, ya que este código está obligando a que el pie de página se caiga de la parte inferior de la página, incluso cuando no hay contenido. El último truco es cambiar el modelo de caja que utiliza el #main-wrappermodo que el min-heightdel 100%incluye 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>

Expandir fragmento

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-bottom, y debería 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 .}

Question 3

El pie de página pegajoso de Ryan Fait es una solución simple que he usado 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 resultados 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 del contenedor para que coincida con la altura de su pie de página y presione div. ¡Buena suerte!

Question 4

Estaba buscando resolver este problema sin agregar ningún marcado adicional, así que terminé usando la siguiente solución:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

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

Expandir fragmento

Debe conocer las alturas de encabezado, navegación y pie de página para poder establecer la altura mínima del artículo. Por esto, si el artículo tiene solo unas pocas líneas de contenido, el pie de página se pegará en la parte inferior de la ventana del navegador, de lo contrario, irá debajo de todo el contenido.

Puede encontrar esta y otras soluciones publicadas arriba aquí: https://css-tricks.com/couple-takes-sticky-footer/