El pie de página es una forma efectiva de organizar una gran cantidad de información y navegación del sitio al final de una página. Este es el lugar donde un usuario buscará una vez que haya terminado de desplazarse por la página actual o esté buscando información adicional sobre el sitio web.
Flexbox se utiliza para estructurar el html de modo que el pie de página esté siempre en la parte inferior de la página. Es importante mantener la estructura de la página dentro de las tres etiquetas HTML5 <header>, <main> y <footer> como se muestra a continuación.
<body> <header></header> <main></main> <footer></footer> </body>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> The Materialize Footer Example </title> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </head> <body class="container"> <!-- Define the footer --> <footer class="page-footer green"> <div class="container "> <div class="row"> <div class="col l6 s12"> <h5 class="white-text"> Footer Content </h5> <p class="grey-text text-lighten-4"> Rows and columns are used to organize the footer content. </p> </div> <div class="col l4 offset-l2 s12"> <h5 class="white-text">Links</h5> <ul> <li> <a class="grey-text text-lighten-3" href="#!"> Link 1 </a> </li> <li> <a class="grey-text text-lighten-3" href="#!"> Link 2 </a> </li> <li> <a class="grey-text text-lighten-3" href="#!"> Link 3 </a> </li> </ul> </div> </div> </div> <div class="footer-copyright green darken-3"> <div class="container "> © 2020 Copyright Text <a class="grey-text text-lighten-4 right" href="#!"> More Links </a> </div> </div> </footer> </body> </html>
Producción:
Pie de página adhesivo: un pie de página adhesivo siempre permanece en la parte inferior de la página, independientemente del poco contenido que haya en la página. Sin embargo, este pie de página se desplazará hacia abajo si hay mucho contenido, por lo que es diferente de un pie de página fijo. Agregue el siguiente código a su archivo CSS.
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
The Materialize Footer Example
</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<style>
/* Add CSS for making the
footer sticky */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</style>
</head>
<body class="container">
<!-- Use the <main> tag for displaying
the contents of the page -->
<main>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>
A Computer Science portal for geeks.
</p>
</main>
<!-- Define the footer -->
<footer class="page-footer green">
<div class="container ">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">
Footer Content
</h5>
<p class="grey-text text-lighten-4">
Rows and columns are
used to organize the footer content.
</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li>
<a class="grey-text
text-lighten-3" href="#!">
Link 1
</a>
</li>
<li>
<a class="grey-text
text-lighten-3" href="#!">
Link 2
</a>
</li>
<li>
<a class="grey-text
text-lighten-3" href="#!">
Link 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright green darken-3">
<div class="container ">
© 2020 Copyright Text
<a class="grey-text
text-lighten-4 right" href="#!">
More Links
</a>
</div>
</div>
</footer>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA