html - hacer - Bootstrap 4 Footer pegajoso no se pega
menu con logo html (5)
No estoy realmente seguro de por qué el pie de página no funciona en Bootstrap 4. Tengo un sitio web de TYPO3 en el que soy un principiante.
El pie de página adhesivo no se pega en la parte inferior de la página.
Aquí hay una copia de la fuente de la página tal como se ha renderizado.
Básicamente copié el archivo html de la carpeta de documentos de bootstraps y luego lo modifiqué y lo copié en mi plantilla TYPO3.
Si lleno la página con contenido, el pie de página no se queda, tengo que desplazarme hacia abajo para verla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky footer with a
fixed navbar</a> if need be, too.
</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
El ejemplo en los documentos de Bootstrap 4 tiene el siguiente CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
Probablemente se haya olvidado de establecer html { position: relative; min-height: 100%; } html { position: relative; min-height: 100%; } html { position: relative; min-height: 100%; } - Sé que suelo olvidar esa parte.
En Bootstrap 4, usa la clase de fixed-bottom para pegar tu pie de página. No se necesita CSS personalizado:
<footer class="footer fixed-bottom">
...
</footer>
Logré averiguarlo. Tal vez tengo un malentendido sobre qué es "Sticky" o algo así, pero la solución fue cambiar absoluto -> corregido en el archivo css.
por ejemplo de
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
a:
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
Actualización 2018 - Bootstrap 4.0.0
Ahora que Bootstrap 4.0 es flexbox, es más fácil usar flexbox para el pie de página adhesivo.
<div class="d-flex flex-column sticky-footer-wrapper">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
body, .sticky-footer-wrapper {
min-height:100vh;
}
.flex-fill {
flex:1 1 auto;
}
Demostración: Bootstrap 4 Sticky Footer (4.0.0)
Nota: la clase de utilidad flex-fill se incluirá en la próxima versión de Bootstrap 4.1 . Así que después de ese lanzamiento no será necesario el CSS adicional para flex-fill.
Ver también: Bootstrap 4 - Pie pegajoso - Altura dinámica del pie
<html class="h-100">
.
.
</html>
Esto deberia resolver el problema. Es similar a Benjineer''s respuesta Benjineer''s pero lista para la clase bootstrap. Probado con Bootstrap 4.3.1