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.
Background: calc(), flex
Qué es pie de página pegajoso - Sticky Footer
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:
Use calc () para calcular (altura de ventana - altura de encabezado - altura de pie de página) la altura mínima del área de contenido que se aplica.
<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>
Comentarios