Pie de página pegajoso en CSS3 6i4a3j

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en pie de página pegajoso - sticky footer en CSS3. 34j5p

Qué es pie de página pegajoso - Sticky Footer 542fn

El llamado se Sticky Footer se refiere a un efecto de página web. Si el contenido de la página no es lo suficientemente largo, el pie de página se adjunta estrechamente a la parte inferior de la ventana gráfica; Si el contenido es lo suficientemente largo, el pie de página está inmediatamente debajo del contenido. El efecto es aproximadamente como se muestra:

<style>
  main{
    width: 100%; height: 392px;
  }
  section input:checked ~ p{ 
    display: none
  }
  .main > header,
  .main > section,
  .main > footer{
    padding: .1em calc(50% - 329px);
    text-align: justify;
    hyphens: auto;
  }
  header{
    text-align: center;
  }
  section {
    box-sizing: border-box;
    min-height: calc(100% - 59px - 107px);
  }
  footer{
    color: white;
    background: #747e7f;
  }
</style>

<main class="main">
    <header>
      <h1>Encabezado del sitio</h1>
    </header>
    <section>
      <input id="con-1" type="checkbox" checked/>
      <label for="con-1"><b>Alternar contenidos</b></label>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
    </section>
    <footer>
      <p>© 2019 TL</p>
      <p>Trucos de CSS3 que necesita saber para el desarrollador web.</p>
    </footer>
</main>

Ver resultado

{PAGEBREAK}

<style>
  main{
    width: 100%; height: 392px;
    display: flex;
    flex-direction: column;
  }
  section input:checked ~ p{ 
    display: none
  }
  .main > header,
  .main > section,
  .main > footer{
    padding: .1em calc(50% - 329px);
    text-align: justify;
    hyphens: auto;
  }
  header{
    text-align: center;
  }
  section {
    flex: 1;
  }
  footer{
    color: white;
    background: #747e7f;
  }
</style>

<main class="main">
    <header>
      <h1>Encabezado del sitio</h1>
    </header>
    <section>
      <input id="con-2" type="checkbox" />
      <label for="con-2"><b>Alternar contenidos</b></label>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
    <footer>
      <p>© 2019 TL</p>
      <p>Trucos de CSS3 que necesita saber para el desarrollador web.</p>
    </footer>
</main>

Ver resultado