CSS para hacer que el pie de página HTML permanezca en la parte inferior de la página con una altura mínima, pero no se superponga a la página

Tengo la siguiente página (enlace muerto:http://www.workingstorage.com/Sample.htm que tiene un pie de página que no puedo colocar en la parte inferior de la página.

Quiero que el pie de página

quédese en la parte inferior de la ventana cuando la página es corta y la pantalla no está llena, y
permanezca al final del documento y baje normalmente cuando haya más de una pantalla llena de contenido (en lugar de superponer el contenido).

El CSS se hereda y me confunde. Parece que no puedo cambiarlo correctamente para poner una altura mínima en el contenido o hacer que el pie de página vaya al final.

Mar 14 '09 00:03 Caveatrob

A continuación se muestran 4 métodos diferentes míos:

En cada ejemplo, los textos se pueden editar libremente para ilustrar cómo se presentaría el contenido en diferentes escenarios.

1) Caja flexible

Mostrar fragmento de código

body{ min-height: 100vh; margin:0; }

header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }

/* The article fills all the space between header & footer */
body{ display:flex; flex-direction:column; }
article{ flex:1; }

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Expandir fragmento

2) Cuadrícula

Mostrar fragmento de código

body{ 
  min-height: 100vh; 
  margin: 0; 
  
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header{ 
  min-height:50px;
  background:lightcyan; 
}

footer{ 
  min-height:50px; 
  background:PapayaWhip; 
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Expandir fragmento

Este método a continuación utiliza un "truco" al colocar un ::afterpseudoelemento en el bodyy configurarlo para que tenga la altura exacta del pie de página, de modo que ocupe exactamente el mismo espacio que el pie de página, de modo que cuando el pie de página se absolutecoloque sobre él, Parecería que el pie de página realmente ocupa espacio y elimina los efectos negativos de su posición absoluta (por ejemplo, repasar el contenido del cuerpo).

3) `position:absolute`(sin altura de pie de página dinámica )

Mostrar fragmento de código

body{ min-height:100vh; margin:0; position:relative; }
header{ min-height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

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

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Expandir fragmento

4) Diseño de mesa

Mostrar fragmento de código

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

header {
  height: 50px;
  background: lightcyan;
}

article { 
  height: 1%;
}

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

/**** Trick: ****/

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

body > footer {
   display: table-row;
}

<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

Expandir fragmento

Dec 03 '2013 13:12 vsync

Un método sencillo es crear el cuerpo 100%de tu página con un min-heightsímbolo de 100%también. Esto funciona bien si la altura del pie de página no cambia.

Dale al pie de página un margen superior negativo:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Mar 27 '2009 10:03 Jon Winstanley

Una solución flexible muy simple que no supone alturas fijas ni cambios de posición de elementos.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Mostrar fragmento de código

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/////////////////////////////////////////////

body,
html {
    margin: 0;
    padding: 0;
}

header,
main,
footer {
  margin: 0;
  display: block;
}

header {
  height: 40px;
  background-color: #ccc;
}

footer {
  height: 80px;
  background-color: orange;
}

main {
  background-color: #f4f4f4;
}

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Expandir fragmento

Aug 18 '2017 18:08 m.spyratos

CSS para hacer que el pie de página HTML permanezca en la parte inferior de la página con una altura mínima, pero no se superponga a la página

A continuación se muestran 4 métodos diferentes míos:

1) Caja flexible

2) Cuadrícula

3) position:absolute(sin altura de pie de página dinámica )

4) Diseño de mesa

3) `position:absolute`(sin altura de pie de página dinámica )